| volBtn.addEventListener("mousedown",function(event){ var e = event || window.event; var that =this; //阻止球的默认拖拽事件 e.preventDefault(); document.onmousemove = function(event){ var e = event || window.event; var mousePos2 = e.offsetY; var maxValue2 = vol.scrollHeight; if(mousePos2<0){ mousePos2 = 0; } if(mousePos2>maxValue2){ mousePos2=maxValue2; } mList[index].volume = (1-mousePos2/maxValue2); console.log(mList[index].volume); volBtn.style.top = (mousePos2)+"px"; volBar.style.height = 60-(mousePos2)+"px"; document.onmouseup = function(event){ document.onmousemove = null; document.onmouseup = null; } } }) |
5歌曲切换
最后我们再来实现比较复杂的歌曲切换功能。
先来看用上一首和下一首按钮进行切换，在切换音乐时我们要注意的问题有下面几个：第一，我们要停止当前播放的音乐，转而播放下一首音乐；第二，要清空进度条和播放时间，重新计算；第三，歌曲信息要随之改变，播放器下面的播放列表样式也要变化。在弄清楚上面三点以后我们就可以开始实现功能了。
| //上一曲 function prevM(){ clearInterval(timer1); clearInterval(timer2); stopM(); qingkong(); cleanProgress(); --index; if(index==-1){ index=mList.length-1; } clearListBgc(); document.getElementById("m"+index).style.backgroundColor = "#A71307"; document.getElementById("m"+index).style.color = "white"; changeInfo(index); mList[index].play(); progressBar(); playTimes(); if (mList[index].paused) { play.style.backgroundImage = "url(media/play.png)"; }else{ play.style.backgroundImage = "url(media/pause.png)"; } } //下一曲 function nextM(){ clearInterval(timer1); clearInterval(timer2); stopM(); qingkong(); cleanProgress(); ++index; if(index==mList.length){ index=0; } clearListBgc(); document.getElementById("m"+index).style.backgroundColor = "#A71307"; document.getElementById("m"+index).style.color = "white"; changeInfo(index); mList[index].play(); progressBar(); playTimes(); if (mList[index].paused) { play.style.backgroundImage = "url(media/play.png)"; }else{ play.style.backgroundImage = "url(media/pause.png)"; } } |
下面的代码是点击列表切换歌曲。
| m0.onclick = function (){ clearInterval(timer1); clearInterval(timer2); qingkong(); flag = false; stopM(); index = 0; pauseall(); play.style.backgroundImage = "url(media/pause.png)"; clearListBgc(); document.getElementById("m0").style.backgroundColor = "#A71307"; document.getElementById("m"+index).style.color = "white"; mList[index].play(); cleanProgress(); progressBar(); changeInfo(index); playTimes(); } m1.onclick = function (){ clearInterval(timer1); clearInterval(timer2); flag = false; qingkong(); stopM(); index = 1; pauseall(); clearListBgc(); play.style.backgroundImage = "url(media/pause.png)"; document.getElementById("m1").style.backgroundColor = "#A71307"; document.getElementById("m"+index).style.color = "white"; mList[index].play(); cleanProgress(); changeInfo(index); progressBar(); playTimes(); } m2.onclick = function (){ clearInterval(timer1); clearInterval(timer2); flag = false; qingkong(); stopM(); index = 2; pauseall(); play.style.backgroundImage = "url(media/pause.png)"; clearListBgc(); document.getElementById("m2").style.backgroundColor = "#A71307"; document.getElementById("m"+index).style.color = "white"; mList[index].play(); cleanProgress(); changeInfo(index); progressBar(); playTimes(); } |
