Js简单实现音乐播放器 |
您所在的位置：网站首页 › JavaScript开发视频播放器 › Js简单实现音乐播放器 |
Js简单实现音乐播放器
|
Js简单实现音乐播放器
HTML部分CSS部分js代码部分
这段时间正好是寒假，闲来无事把大二学的web再温习了一遍，在学习到Js时，想找一些小玩意来练练手，于是我就用原生Js做了一个简单音乐播放器。
音乐播放器功能如下： 支持上、下一首歌切换开始、暂停音量调整音乐图片的旋转实现效果 html部分实现了简单的页面布局，作为音乐播放器的按键我选择了从fontawesome图库中导入，也就是我们看到的i标签（下载地址：http://www.fontawesome.com.cn/） 代码片. Music Player \\音量大小使用font-awesome包时一定要记得引入！！！！ CSS部分这层叠样式表，就不需要过多解释了 *{ margin: 0px; padding: 0px; } #Music{ height: 980px; background-image: linear-gradient(#e66465, #9198e5); //渐变色 } #Music-text{ width: 200px; height: 100px; float: left; margin-top: 220px; margin-left: 46%; } #Music-text span{ font-size: 22px; font-weight: bold; font-family: Garamond; } #Music #Music-player .Mucis-Program{ width: 460px; height: 280px; margin-left: 38%; margin-top: 10px; background: rgba(255,255,255,0.4); float: left; border-radius: 25px; } #Music-player .Mucis-Program img{ width: 80px; height: 80px; margin-top: 40px; margin-left: 190px; } #Music-player .Mucis-Program #stop{ margin-top: 50px; margin-left: 218px; display: none; overflow: auto; } #Music-player .Mucis-Program #start{ margin-top: 50px; margin-left: 218px; display: block; overflow: auto; } #Music-player .Mucis-Program #preMu{ margin-top: -30px; margin-left: 60px; float: left; } #Music-player .Mucis-Program #nextMu{ margin-left: 278px; margin-top: -30px; float: left; } #Music-player .Mucis-Program #voiceMu{ margin-left: 218px; margin-top: 30px; float: left; } #voice{ margin-left: 246px; margin-top: -24px; float: left; } i{ cursor: pointer; } js代码部分变量声明 | 将三首歌装入数组中 var py1 = document.getElementById("play1"); \\歌曲1 var py2 = document.getElementById("play2"); \\歌曲2 var py3 = document.getElementById("play3"); \\歌曲3 var music_arr = [py1,py2,py3]; var index = 0; \\数组下标开始播放 | 在触发这个函数之后，开始按钮隐藏，暂停按钮出现，并播放歌曲，图片开始旋转 function st() { //开始 document.getElementById("start").style.display = "none"; document.getElementById("stop").style.display = "block" music_arr[index].play(); rotate(); }暂停播放 | 与开始播放函数同理，并暂停图片的旋转 function zantin() { //暂停 document.getElementById("stop").style.display = "none"; document.getElementById("start").style.display = "block"; music_arr[index].pause(); imagePause(); }声音调节 | 触发事件后使得声音随着进度条大小变化 function myVolume() { //调节声音 music_arr[index].volume = document.getElementById("voice").value; }切歌 | 在编写程序时我们要先明白，无论切上一首歌还是下一首歌时我们需要先暂停歌曲，再进行对歌曲的操作（index++/index–），判断index是否高于上限或低于下限，最后再开始下标为index的歌曲 function reduce() { //上一首歌 zantin(); index--; if(index == -1){ index = music_arr.length-1; } st(); } function add() { //下一首歌 zantin(); index++; if(index>music_arr.length-1){ index=0; } st(); }下面是图片转动的函数，当音乐播放的时候调用rotate（）函数，就可以实现图片的旋转； 同样清除定时器的函数，当音乐暂停的时候调用imagePause()，图片旋转的定时器被清除掉。 function rotate(){ //图片旋转 var deg = 0; timer = setInterval(function () { document.getElementById("Mpicture").style.transform="rotate("+deg+"deg)"; deg+=5; if(deg>360){ deg=0; } },30); } function imagePause() { clearInterval(timer); }以上就是对实现简单音乐播放器的所有内容，如若有不足之处望大家指出。 |
【本文地址】
今日新闻 |
推荐新闻 |