js实现音乐播放器

本文实例为大家分享了js实现音乐播放器的具体代码，供大家参考，具体内容如下

音乐播放的主要js代码

音乐数据的数组对象

想向前端网页提供数据，并且为后面的js代码提供了音乐路径

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

?{ ? ? ? ? ablum: "海阔天空", ? ? ? ? artist: "Beyond", ? ? ? ? id: 1, ? ? ? ? name: "大地", ? ? ? ? path: "musics/1592373302464.mp3", ? ? ? ? size: 4147913, ? ? ? ? style: "摇滚", ? ? ? ? uptime: 1592373302000 ? ? }, ? ? { ? ? ? ? ablum: "xxx", ? ? ? ? artist: "GALA ", ? ? ? ? id: 2, ? ? ? ? name: "追梦赤子心", ? ? ? ? path: "musics/1592373330188.mp3", ? ? ? ? size: 8357216, ? ? ? ? style: "摇滚", ? ? ? ? uptime: 1592373330000 ? ? }, ? ? { ? ? ? ? ablum: "123", ? ? ? ? artist: "筷子兄弟", ? ? ? ? id: 3, ? ? ? ? name: "父亲", ? ? ? ? path: "musics/1592373363687.mp3", ? ? ? ? size: 12050851, ? ? ? ? style: "怀旧", ? ? ? ? uptime: 1592373363000 ? ? }, ? ? { ? ? ? ? ablum: "xxx", ? ? ? ? artist: "Bruno Mars ", ? ? ? ? id: 4, ? ? ? ? name: "Just The Way You Are", ? ? ? ? path: "musics/1592383891287.mp3", ? ? ? ? size: 3602925, ? ? ? ? style: "摇滚", ? ? ? ? uptime: 1592383891000 ? ? }, ? ? { ? ? ? ? ablum: "xxx", ? ? ? ? artist: "Jason Chen", ? ? ? ? id: 5, ? ? ? ? name: "童话", ? ? ? ? path: "musics/1592383916578.mp3", ? ? ? ? size: 4143707, ? ? ? ? style: "流行", ? ? ? ? uptime: 1592383916000 ? ? },

全局变量

?

1 2 3 4 5 6

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

自调用函数

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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

添加点击事件

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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

当然，不可能一次播放多个音乐，所以在播放当前音乐时将上一首音乐清除（封装方法见下）

封装方法

1.清除上一首歌曲方法
2.开始播放方法（同时将全局变量isplay设置为true）
3.暂停播放方法（同时将全局变量isplay设置为false）
4.将总时长s转变成mm：ss
5.将大小B装化为MB

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

//清除上一首歌的歌曲状态 function clearstatus() { ? ? //还原上一首正在播放的歌曲表的背景颜色 ? ? trs[currentIndex].style.background=''; ? ? //清除当前行下的第一个单元格的内容（清除图标） ? ? trs[currentIndex].getElementsByTagName('td')[0].innerHTML='' } //开始播放 function startPlay() { ? ? //将状态标记为正在播放 ? ? isplay=true; ? ? //播放 ? ? player.play(); ? ? //修改当前行的背景色 ? ? trs[currentIndex].style.background='#f0f0f0'; ? ? trs[currentIndex].getElementsByTagName('td')[0].innerHTML='<img src="imgs/playing-list.gif" alt="">' ? ? //将播放按钮的背景图片设置为暂停图标 ? ? document.getElementById('btnPlay').className='btn-pause'; ? ? //将正在播放的歌曲名显示到底部控制区域 ? ? document.getElementById('playingName').innerText=musics[currentIndex].name; } //暂停播放 function pausePlay(){ ? ? isplay=false; ? ? player.pause(); ? ? document.getElementById('btnPlay').className='btn-play'; } //格式化歌曲播放时间 mm:ss function fmtTime(time) { ? ? time*=1000; ? ? //使用毫秒构建日期对象 ? ? time=new Date(time); ? ? var m = time.getMinutes(); ? ? var s = time.getSeconds(); ? ? m=m<10?'0'+m:m; ? ? s=s<10?'0'+s:s; ? ? return m+':'+s; } //大小转化 function fmtSize(size) { ? ? size=size/(1024*1024); ? ? size=size.toFixed(1); ? ? return size+'MB'; }

播放控制按钮

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

?

1 2 3 4 5 6 7 8

//播放控制 document.getElementById('btnPlay').addEventListener('click',function () { ? ? if (isplay){ ? ? ? ? pausePlay(); ? ? } else{ ? ? ? ? startPlay(); ? ? } });

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13

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

为进度条绑定进度改变事件

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

?

1 2 3 4 5 6 7 8 9 10

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

为播放器绑定播放完成事件以及上下首的切换

同意要清除上一首歌的播放状态，改变全局变量currentIndex就可以实现

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

//为播放器绑定播放完成事件 player.addEventListener('ended',function () { ? ? //清除上一首播放状态 ? ? clearstatus(); ? ? currentIndex++; ? ? if(currentIndex>=musics.length){ ? ? ? ? currentIndex=0; ? ? } ? ? //重新为播放器设置播放源 ? ? player.src=musics[currentIndex].path; ? ? //继续播放 ? ? startPlay(); }); //上一首 document.querySelector('.btn-pre').addEventListener('click',function () { ? ? clearstatus(); ? ? currentIndex--; ? ? if(currentIndex<0){ ? ? ? ? currentIndex=musics.length-1; ? ? } ? ? //重新为播放器设置播放源 ? ? player.src=musics[currentIndex].path; ? ? //继续播放 ? ? startPlay(); }); //下一首 document.querySelector('.btn-next').addEventListener('click',function () { ? ? clearstatus(); ? ? currentIndex++; ? ? currentIndex=currentIndex%musics.length; ? ? //重新为播放器设置播放源 ? ? player.src=musics[currentIndex].path; ? ? //继续播放 ? ? startPlay(); });

通过进度条控制歌曲播放

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

//改变歌曲的播放进度 (function(box,bar) { ? ? //监听鼠标是否按下 ? ? var status=false; ? ? //鼠标按下事件监听 ? ? document.querySelector(box).addEventListener('mousedown',function (e) { ? ? ? ? player.removeEventListener('timeupdate',updateProgress); ? ? ? ? move(e); ? ? ? ? status=true; ? ? }) ? ? //鼠标抬起事件监听 ? ? document.addEventListener('mouseup',function () { ? ? ? ? player.currentTime=now; ? ? ? ? player.addEventListener('timeupdate',updateProgress); ? ? ? ? status=false; ? ? }) ? ? //鼠标移动事件监听 ? ? document.querySelector(box).addEventListener('mousemove',function (e) { ? ? ? ? if(status==true){ ? ? ? ? ? ? move(e) ? ? ? ? } ? ? }) ? ? //鼠标滑动执行 ? ? function move(e) { ? ? ? ? var eventLeft=e.offsetX; ? ? ? ? var w=window.getComputedStyle(document.querySelector(box)).width; ? ? ? ? var w1=window.getComputedStyle(document.querySelector('.play-current')).width; ? ? ? ? var w2=window.getComputedStyle(document.querySelector('.play-duration')).width; ? ? ? ? w1=parseInt(w1); ? ? ? ? w2=parseInt(w2); ? ? ? ? document.querySelector(bar).style.width=eventLeft+w1+'px'; ? ? ? ? now=(eventLeft)/(parseInt(w)-w1-w2)*total; ? ? ? ? status=true; ? ? ? ? // var eventLeft=e.offsetX; ? ? ? ? // document.querySelector(bar).style.width=eventLeft+'px'; ? ? ? ? // var w=window.getComputedStyle(document.querySelector(box)).width; ? ? ? ? // now=eventLeft/parseInt(w)*total; ? ? ? ? // status=true; ? ? } })('.play-length','.progress-control');