JavaScript实现带播放列表的音乐播放器实例分享
代码较最基础的播放器实现增加了playlist，使用MakeList实现多首播放，有需要的可以直接使用：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>UntitledPage</title>
</head>
<bodystyle="font-family:Verdana;font-size:12px">
<script>
/*************************************************************
LovelyLifePlayerV1.0
EditedByLovelyLife
At2006-09-16
Allrightsreservered
CodeStart
Modifybyhttp://www.tt419.cn/
*************************************************************/
varplayid="LovelyLifePlayer"
varstatus="status"
varcurId,arrPL,selected
varisStop,isLoop
arrPL=newArray()//播放器列表
cur=0
curId=0
isStop=false
selected=0
isLoop=true
functionsongObj(Id,url,name){
this.Id=Id
this.url=url
this.name=name
}
functionplayAndpauseIt(){
if(document.getElementById(status).innerText=='暂停'){
document.getElementById(playid).controls.pause()
document.getElementById(status).innerHTML='播放'
}
else{document.getElementById(status).innerText='暂停'
document.getElementById(playid).controls.play()}
}
functionstopIt(){
isStop=true
document.getElementById(status).innerHTML='播放'
document.getElementById(playid).controls.stop()
}
functionshowTimer(){
varcp=document.getElementById(playid).controls.currentPosition
varcps=document.getElementById(playid).controls.currentPositionString
vardur=document.getElementById(playid).currentMedia.duration;
vardurs=document.getElementById(playid).currentMedia.durationString;
vars=document.getElementById(playid).playState
varo=document.getElementById(playid).openState
if(s==2||s==3)
document.getElementById('pos').innerText=""+cps+"/"+durs+""
else
document.getElementById('pos').innerText="00:00/"+durs+""
if(s==1){
if(isLoop&&(curId>(arrPL.length-1))){
curId=0
return0
}
clearIt()
if(curId<0||curId>arrPL.length){
alert("当前没有歌曲！，请查看播放列表！")
returnfalse
}
nxtPlay()
}
if(s==10&&arrPL.length>0)
nxtPlay()
}
functionnxtPlay(){
isStop=true
if(curId>arrPL.length-1){
document.getElementById("songName").innerText="没有歌曲了，请选择上一曲!"
document.getElementById(playid).URL="NULL"
returnfalse
}
curId++
clearIt()
setIt(curId)
PlayIt(curId)
}
functionprePlay(){
isStop=true
if(curId<0){
document.getElementById("songName").innerText="没有歌曲了，请选择下一曲!"
document.getElementById(playid).URL="NULL"
returnfalse
}
curId--
clearIt()
setIt(curId)
PlayIt(curId)
}
functionPlayIt(cid){
if(curId<0||curId>arrPL.length-1){
document.getElementById("songName").innerText="当前没有歌曲！，请查看播放列表！"
returnfalse
}
url=arrPL[cid].url;
curId=cid
if(url=="None"){
document.getElementById("songName").innerText="加载歌曲未找到!播放下一曲！"
nxtPlay()
returnfalse
}
document.getElementById(playid).URL=url
document.getElementById("songName").innerText=arrPL[cid].name
}
functionclearIt(){
if((arrPL.length-1<0)||selected<0||selected>arrPL.length){
returnfalse
}
}
functionsetIt(tid){
if(tid<0||tid>arrPL.length-1){
document.getElementById("songName").innerText="当前没有歌曲！，请查看播放列表！"
returnfalse
}
}
functionInitPlay(songName,url,auto){
varstrTemp="<objectclassid=\"CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6\""
strTemp+="type=\"application/x-oleobject\"width=\"0\"height=\"0\"id="+playid
strTemp+="style=\"position:relative;left:0px;top:0px;width:0px;height:0px;\">\n"
strTemp+="<paramname=\"autoStart\"value=\""+auto+"\">\n"
strTemp+="<paramname=\"balance\"value=\"0\">\n"
strTemp+="<paramname=\"currentPosition\"value=\"0\">\n"
strTemp+="<paramname=\"currentMarker\"value=\"0\">\n"
strTemp+="<paramname=\"enableContextMenu\"value=\"0\">\n"
strTemp+="<paramname=\"enableErrorDialogs\"value=\"0\">\n"
strTemp+="<paramname=\"enabled\"value=\"-1\">\n"
strTemp+="<paramname=\"fullScreen\"value=\"0\">\n"
strTemp+="<paramname=\"invokeURLs\"value=\"0\">\n"
strTemp+="<paramname=\"mute\"value=\"0\">\n"
strTemp+="<paramname=\"playCount\"value=\"1\">\n"
strTemp+="<paramname=\"rate\"value=\"1\">\n"
strTemp+="<paramname=\"uiMode\"value=\"none\">\n"
strTemp+="<paramname=\"volume\"value=\"100\">\n"
strTemp+="<paramname=\"URL\"value=\""+url+"\">\n"
strTemp+="</object>\n<fontclass=HighLightstyle=\"background-color:#EEE;padding:8px;height:30px;width:100%\">"
strTemp+="<b>点播的歌曲:<marqueewidth=30%speed=3><fontcolor=redid=songName>"+songName+"</font></marquee>"
strTemp+="[<fontid=pos></font>]"
strTemp+="[<fontonclick=playAndpauseIt()style='cursor:hand;'id="+status+">播放</font>]"
strTemp+="[<fontonclick=stopIt()style='cursor:hand;'>停止</font>]"
if((arrPL.length-2)>=0){
strTemp+="[<fontonclick=prePlay()style='cursor:hand;'>上曲</font>]"
strTemp+="[<fontonclick=nxtPlay()style='cursor:hand;'>下曲</font>]"
}
strTemp+="</b>"
document.getElementById('player').innerHTML=strTemp
temptimer=setInterval('showTimer()',1000);
}
functionplayX(cur){
PlayIt(cur)
clearIt()
setIt(cur)
curId=cur
selected=cur
}
functionMakeList(Id,Url,Name){
arrPL[cur]=newsongObj(Id,Url,Name)
cur++
}
functionloopIt(){
if(isLoop){
document.getElementById('sloop').innerText="不循环"
isLoop=false
}else{
document.getElementById('sloop').innerText="循环播放"
isLoop=true
}
}
/*CodeEnd*/
window.attachEvent('onload',function(){
InitPlay("女人如烟[词曲：穆真演唱：魏佳艺]","http://happy369.com/yy/nrry.mp3",1);
playAndpauseIt();
})
</script>
<divid=playerstyle="width:70%"></div>
<script>
MakeList(1,"http://happy369.com/yy/nrry.mp3","111");
MakeList(2,"http://www.gxyx.net/sourcefile/0/0/2/2958.wma","222");
MakeList(3,"http://hz.98777.com/rm0402/q/258.rm","333");
MakeList(4,"http://www.gxyx.net/sourcefile/0/0/2/2958.wma","4444");
</script>
</body>
</html>
MakeList参数：共3个参数，第一个是ID,第二个参数是音乐的URL地址，第三个参数是歌曲的名称。说明都写在注释里了，欢迎大家阅读和参考。