通过播放列表来切换歌曲与通过按钮切换的思路差不多，只是根据对应的列表项来设置当前应该播放哪首歌曲。
上面切换歌曲的函数中都调用了几个方法，下面我们来看看这些方法的用途都是什么吧。
首先是切换歌曲信息：
| function changeInfo(index){ if (index==0) { musicName.innerHTML = "光辉岁月"; singer.innerHTML = "Beyond"; } if (index==1) { musicName.innerHTML = "Free Loop"; singer.innerHTML = "Daniel Powter"; } if (index==2) { musicName.innerHTML = "千里之外"; singer.innerHTML = "周杰伦、费玉清"; } } |
然后清空两个定时器：
| //将进度条置0 function cleanProgress(timer1){ if(timer1!=undefined){ clearInterval(timer1); } progress.style.width="0"; progressBtn.style.left="60px"; } function qingkong(timer2){ if(timer2!=undefined){ clearInterval(timer2); } } |
再把播放的音乐停止，并且将播放时间恢复。
| function stopM(){ if(mList[index].played){ mList[index].pause(); mList[index].currentTime=0; flag=false; } } |
最后的最后，改变下面播放列表的样式：
| function clearListBgc(){ document.getElementById("m0").style.backgroundColor = "#E5E5E5"; document.getElementById("m1").style.backgroundColor = "#E5E5E5"; document.getElementById("m2").style.backgroundColor = "#E5E5E5"; document.getElementById("m0").style.color = "black"; document.getElementById("m1").style.color = "black"; document.getElementById("m2").style.color = "black"; } |
到此，音乐播放器我们就基本完成了，来看一下动图的效果：
作者：杰瑞教育
出处：http://www.cnblogs.com/jerehedu/
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易采站长站。
