js音乐播放器
#%^*$& 人气:0音乐播放的主要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:;">${m.name}</a></td> <td><a href="javascript:;">${m.artist}</a></td> <td><a href="javascript:;">${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.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说明当前正在播放歌曲,点击就会暂停,反之就会播放
//播放控制 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');
加载全部内容