上面的代码中调用了多个函数，其中播放和暂停是audio标签自带的方法，而其他的函数则是我们自己定义的。下面我们就来看一下这些函数是怎么实现的，又对应了哪些功能吧。
3进度条和播放时间：
首先是进度条功能，获取歌曲的全部时长，然后再根据当前播放的进度与进度条总长度相乘计算出进度条的位置。
| function progressBar(){ var lenth=mList[index].duration; timer1=setInterval(function(){ cur=mList[index].currentTime;//获取当前的播放时间 progress.style.width=""+parseFloat(cur/lenth)*300+"px"; progressBtn.style.left= 60+parseFloat(cur/lenth)*300+"px"; },10) } |
下面是改变播放时间功能，这里我们设置一个定时函数，每隔一段时间来执行一次以改变播放时间。因为我们获取到的歌曲时长是以秒来计算，所以我们要利用if语句对时长判断来进行换算，将播放时间改为以几分几秒的形式来显示。
| function playTimes(){ timer2=setInterval(function(){ cur=parseInt(mList[index].currentTime);//秒数 var minute=parseInt(cur/60); if (minute<10) { if(cur%60<10){ playTime.innerHTML="0"+minute+":0"+cur%60+""; }else{ playTime.innerHTML="0"+minute+":"+cur%60+""; } } else{ if(cur%60<10){ playTime.innerText= minute+":0"+cur%60+""; }else{ playTime.innerText= minute+":"+cur%60+""; } } },1000); } |
4调整播放进度和音量：
接下来我们再来完成一下通过进度条调整播放进度和调整音量功能。
调整播放进度功能利用了event对象来实现，因为offsetX属性只有IE事件具有，所以推荐使用IE浏览器查看效果。先对进度条添加事件监听，当在进度条上点击鼠标时，获取鼠标的位置，并根据位置除以进度条的总长度来计算当前的播放进度，然后对歌曲进行设置。
| //调整播放进度 total.addEventListener("click",function(event){ var e = event || window.event; document.onmousedown = function(event){ var e = event || window.event; var mousePos1 = e.offsetX; var maxValue1 = total.scrollWidth; mList[index].currentTime = (mousePos1/300)*mList[index].duration; progress.style.width = mousePos1+"px"; progressBtn.style.left = 60+ mousePos1 +"px"; } }) |
下面是调整音量功能，音量的调整我们采用拖动的形式实现，思路也是对音量条的按钮球添加事件监听，然后根据拖动的位置来计算按钮球相对于音量条整体的位置，最后根据计算结果与音量相乘得出当前音量：
