js实现音乐播放器

js实现音乐播放器

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

音乐播放的主要js代码

音乐数据的数组对象

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

 {         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     },

全局变量

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

自调用函数

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

(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; })();

添加点击事件

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

//为列表项触发点击事件 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

//清除上一首歌的歌曲状态 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.webp" 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说明当前正在播放歌曲,点击就会暂停,反之就会播放

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

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

//记录歌曲的当前播放时间 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了

//为播放器绑定播放进度改变事件 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就可以实现

//为播放器绑定播放完成事件 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(); });

通过进度条控制歌曲播放

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

//改变歌曲的播放进度 (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');

推荐阅读