js实现音乐播放器

本文实例为大家分享了js实现音乐播放器的具体代码，供大家参考，具体内容如下
音乐播放的主要js代码
音乐数据的数组对象
想向前端网页提供数据，并且为后面的js代码提供了音乐路径

1. {
2.     ablum: "海阔天空",
3.     artist: "Beyond",
4.     id: 1,
5.     name: "大地",
6.     path: "musics/1592373302464.mp3",
7.     size: 4147913,
8.     style: "摇滚",
9.     uptime: 1592373302000
10.   },
11.   {
12.     ablum: "xxx",
13.     artist: "GALA ",
14.     id: 2,
15.     name: "追梦赤子心",
16.     path: "musics/1592373330188.mp3",
17.     size: 8357216,
18.     style: "摇滚",
19.     uptime: 1592373330000
20.   },
21.   {
22.     ablum: "123",
23.     artist: "筷子兄弟",
24.     id: 3,
25.     name: "父亲",
26.     path: "musics/1592373363687.mp3",
27.     size: 12050851,
28.     style: "怀旧",
29.     uptime: 1592373363000
30.   },
31.   {
32.     ablum: "xxx",
33.     artist: "Bruno Mars ",
34.     id: 4,
35.     name: "Just The Way You Are",
36.     path: "musics/1592383891287.mp3",
37.     size: 3602925,
38.     style: "摇滚",
39.     uptime: 1592383891000
40.   },
41.   {
42.     ablum: "xxx",
43.     artist: "Jason Chen",
44.     id: 5,
45.     name: "童话",
46.     path: "musics/1592383916578.mp3",
47.     size: 4143707,
48.     style: "流行",
49.     uptime: 1592383916000
50.   },

复制代码

全局变量

1. //创建音频播放器对象
2. var player =document.createElement('audio');
3. //设置当前正在播放的歌曲的索引
4. var currentIndex=0;
5. //声明一个标记，记录歌曲的播放状态
6. var isplay=false;

复制代码

自调用函数
主要功能是通过循环遍历使用html字符串向前端动态的添加音乐数据，并初始播放源（currentIndex标记）

1. (function() {
2. //绑定数据到页面中
3.     var html = '';
4. //循环遍历歌曲列表，根据歌曲数目在页面生成对应的html代码
5.     for (var i = 0; i < musics.length; i++) {
6.         var m = musics[i];
7.         //根据循环的次数创建对应的歌曲项
8.         html += `<tr class="music-item" data-index="${i}">
9.                  <td class="tb-space" style="text-align: center"></td>
10.                  <td><a href="javascript:;">${m.name}</a></td>
11.                  <td><a href="javascript:;">${m.artist}</a></td>
12.                  <td><a href="javascript:;">${m.ablum}</a></td>
13.                  <td>${fmtSize(m.size)}</td>
14.                  <td class="tb-space"></td>
15.                </tr>`;
16.     }
17.     //将生产html插入到指定的dom节点中
18.     document.getElementById('tbody').innerHTML = html;
19.     //初始化播放源
20.     player.src=musics[currentIndex].path;
21. })();

复制代码

添加点击事件
循环遍历的给所有的音乐对象添加点击事件

1. //为列表项触发点击事件
2. var trs = document.querySelectorAll('.music-item');
3. for (var i=0;i<trs.length;i++) {
5.   trs[i].addEventListener('click',function () {
6.     //清除状态
7.     clearstatus();
8.     var index = this.dataset.index;
9.     //记录当前播放的歌曲索引
10.     currentIndex=index;
11.     //获取需要播放的对象
12.     var m = musics[index];
13.     //设置播放源
14.     player.src=m.path;
15.     startPlay();
16.   })

复制代码

当然，不可能一次播放多个音乐，所以在播放当前音乐时将上一首音乐清除（封装方法见下）
封装方法
1.清除上一首歌曲方法
2.开始播放方法（同时将全局变量isplay设置为true）
3.暂停播放方法（同时将全局变量isplay设置为false）
4.将总时长s转变成mm：ss
5.将大小B装化为MB

1. //清除上一首歌的歌曲状态
2. function clearstatus() {
3.   //还原上一首正在播放的歌曲表的背景颜色
4.   trs[currentIndex].style.background='';
5.   //清除当前行下的第一个单元格的内容（清除图标）
6.   trs[currentIndex].getElementsByTagName('td')[0].innerHTML=''
7. }
8. //开始播放
9. function startPlay() {
10.   //将状态标记为正在播放
11.   isplay=true;
12.   //播放
13.   player.play();
14.   //修改当前行的背景色
15.   trs[currentIndex].style.background='#f0f0f0';
16.   trs[currentIndex].getElementsByTagName('td')[0].innerHTML='<img src="imgs/playing-list.gif" alt="">'
17.   //将播放按钮的背景图片设置为暂停图标
18.   document.getElementById('btnPlay').className='btn-pause';
19.   //将正在播放的歌曲名显示到底部控制区域
20.   document.getElementById('playingName').innerText=musics[currentIndex].name;
21. }
23. //暂停播放
24. function pausePlay(){
25.   isplay=false;
26.   player.pause();
27.   document.getElementById('btnPlay').className='btn-play';
28. }
29. //格式化歌曲播放时间 mm:ss
30. function fmtTime(time) {
31.   time*=1000;
32.   //使用毫秒构建日期对象
33.   time=new Date(time);
34.   var m = time.getMinutes();
35.   var s = time.getSeconds();
36.   m=m<10?'0'+m:m;
37.   s=s<10?'0'+s:s;
38.   return m+':'+s;
39. }
41. //大小转化
42. function fmtSize(size) {
43.   size=size/(1024*1024);
44.   size=size.toFixed(1);
45.   return size+'MB';
46. }

复制代码

播放控制按钮
就是暂停和播放按钮
判断全局变量isplay，如果是true说明当前正在播放歌曲，点击就会暂停，反之就会播放

1. //播放控制
2. document.getElementById('btnPlay').addEventListener('click',function () {
3.   if (isplay){
4.     pausePlay();
5.   } else{
6.     startPlay();
7.   }
8. });

复制代码

将当前歌曲的播放时长与总时长在界面上动态改变

1. //记录歌曲的当前播放时间
2. var now =0;
3. //记录歌曲的总播放时长
4. var total=0;
5. //当播放器的数据被加载时触发
6. player.addEventListener('loadeddata',function () {
7.   //获取当前播发器的播放位置以及总播放时长（单位s）
8.   now=player.currentTime;
9.   total=player.duration;
10.   //将歌曲的播放时间显示到控制区域
11.   document.querySelector('.play-current').innerText=fmtTime(now);
12.   document.querySelector('.play-duration').innerText=fmtTime(total);
13. })

复制代码

为进度条绑定进度改变事件
原理很简单，通过上面的时间变化求得百分比，设置为进度的百分比就OK了

1. //为播放器绑定播放进度改变事件
2. player.addEventListener('timeupdate',updateProgress);
3.   function updateProgress() {
4.   //获取当前的播放进度
5.   now=player.currentTime;
6.   //计算进度的百分比
7.   var p =now/total*100+'%';
8.   document.querySelector('.progress-control').style.width=p;
9.   document.querySelector('.play-current').innerText=fmtTime(now);
10. }

复制代码

为播放器绑定播放完成事件以及上下首的切换
同意要清除上一首歌的播放状态，改变全局变量currentIndex就可以实现

1. //为播放器绑定播放完成事件
2. player.addEventListener('ended',function () {
3.   //清除上一首播放状态
4.   clearstatus();
5.   currentIndex++;
6.   if(currentIndex>=musics.length){
7.     currentIndex=0;
8.   }
9.   //重新为播放器设置播放源
10.   player.src=musics[currentIndex].path;
11.   //继续播放
12.   startPlay();
13. });
15. //上一首
16. document.querySelector('.btn-pre').addEventListener('click',function () {
17.   clearstatus();
18.   currentIndex--;
19.   if(currentIndex<0){
20.     currentIndex=musics.length-1;
21.   }
22.   //重新为播放器设置播放源
23.   player.src=musics[currentIndex].path;
24.   //继续播放
25.   startPlay();
27. });
28. //下一首
29. document.querySelector('.btn-next').addEventListener('click',function () {
30.   clearstatus();
31.   currentIndex++;
32.   currentIndex=currentIndex%musics.length;
33.   //重新为播放器设置播放源
34.   player.src=musics[currentIndex].path;
35.   //继续播放
36.   startPlay();
37. });

复制代码

通过进度条控制歌曲播放
对鼠标进行监听，得到鼠标最后的落点，计算出进度条的起始位置与该点占据总长度的比例，然后简单的数学运算，我们知道歌曲总长度就很清楚的得到鼠标落点的歌曲该播放的位置

1. //改变歌曲的播放进度
2. (function(box,bar) {
3.   //监听鼠标是否按下
4.   var status=false;
5.   //鼠标按下事件监听
6.   document.querySelector(box).addEventListener('mousedown',function (e) {
7.     player.removeEventListener('timeupdate',updateProgress);
8.     move(e);
9.     status=true;
10.   })
12.   //鼠标抬起事件监听
13.   document.addEventListener('mouseup',function () {
14.     player.currentTime=now;
15.     player.addEventListener('timeupdate',updateProgress);
16.     status=false;
17.   })
19.   //鼠标移动事件监听
20.   document.querySelector(box).addEventListener('mousemove',function (e) {
21.     if(status==true){
22.       move(e)
23.     }
24.   })
26.   //鼠标滑动执行
27.   function move(e) {
28.     var eventLeft=e.offsetX;
30.     var w=window.getComputedStyle(document.querySelector(box)).width;
31.     var w1=window.getComputedStyle(document.querySelector('.play-current')).width;
32.     var w2=window.getComputedStyle(document.querySelector('.play-duration')).width;
33.     w1=parseInt(w1);
34.     w2=parseInt(w2);
35.     document.querySelector(bar).style.width=eventLeft+w1+'px';
36.     now=(eventLeft)/(parseInt(w)-w1-w2)*total;
37.     status=true;
39.     // var eventLeft=e.offsetX;
40.     // document.querySelector(bar).style.width=eventLeft+'px';
41.     // var w=window.getComputedStyle(document.querySelector(box)).width;
42.     // now=eventLeft/parseInt(w)*total;
43.     // status=true;
45.   }
46. })('.play-length','.progress-control');

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。