代碼較最基礎的播放器實現增加了playlist,使用MakeList實現多首播放,有需要的可以直接使用:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Page</title> </head> <body style="font-family:Verdana; font-size:12px"> <script> /************************************************************* LovelyLife Player V1.0 Edited By LovelyLife At 2006-09-16 All rights reservered Code Start Modify by http://www.tt419.cn/ *************************************************************/ var playid = "LovelyLifePlayer" var status = "status" var curId,arrPL,selected var isStop,isLoop arrPL = new Array() //播放器列表 cur = 0 curId = 0 isStop = false selected = 0 isLoop = true function songObj(Id,url, name){ this.Id = Id this.url = url this.name = name } function playAndpauseIt(){ if(document.getElementById(status).innerText == '暫停'){ document.getElementById(playid).controls.pause() document.getElementById(status).innerHTML ='播放' } else{ document.getElementById(status).innerText = '暫停' document.getElementById(playid).controls.play()} } function stopIt(){ isStop = true document.getElementById(status).innerHTML ='播放' document.getElementById(playid).controls.stop() } function showTimer(){ var cp=document.getElementById(playid).controls.currentPosition var cps=document.getElementById(playid).controls.currentPositionString var dur=document.getElementById(playid).currentMedia.duration; var durs=document.getElementById(playid).currentMedia.durationString; var s = document.getElementById(playid).playState var o = 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 return 0 } clearIt() if(curId<0 || curId>arrPL.length){ alert("當前沒有歌曲!,請查看播放列表!") return false } nxtPlay() } if( s == 10 && arrPL.length >0 ) nxtPlay() } function nxtPlay(){ isStop = true if(curId > arrPL.length - 1){ document.getElementById("songName").innerText = "沒有歌曲了,請選擇上一曲!" document.getElementById(playid).URL = "NULL" return false } curId++ clearIt() setIt(curId) PlayIt(curId) } function prePlay(){ isStop = true if(curId<0){ document.getElementById("songName").innerText = "沒有歌曲了,請選擇下一曲!" document.getElementById(playid).URL = "NULL" return false } curId-- clearIt() setIt(curId) PlayIt(curId) } function PlayIt(cid){ if(curId<0 || curId>arrPL.length -1){ document.getElementById("songName").innerText = "當前沒有歌曲!,請查看播放列表!" return false } url = arrPL[cid].url; curId = cid if(url == "None"){ document.getElementById("songName").innerText = "加載歌曲未找到!播放下一曲!" nxtPlay() return false } document.getElementById(playid).URL = url document.getElementById("songName").innerText = arrPL[cid].name } function clearIt(){ if((arrPL.length - 1 <0) || selected < 0 || selected > arrPL.length){ return false } } function setIt(tid){ if(tid<0 || tid>arrPL.length-1){ document.getElementById("songName").innerText = "當前沒有歌曲!,請查看播放列表!" return false } } function InitPlay(songName,url,auto){ var strTemp = "<object classid=\"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 += " <param name=\"autoStart\" value=\""+auto+"\">\n" strTemp += " <param name=\"balance\" value=\"0\">\n" strTemp += " <param name=\"currentPosition\" value=\"0\">\n" strTemp += " <param name=\"currentMarker\" value=\"0\">\n" strTemp += " <param name=\"enableContextMenu\" value=\"0\">\n" strTemp += " <param name=\"enableErrorDialogs\" value=\"0\">\n" strTemp += " <param name=\"enabled\" value=\"-1\">\n" strTemp += " <param name=\"fullScreen\" value=\"0\">\n" strTemp += " <param name=\"invokeURLs\" value=\"0\">\n" strTemp += " <param name=\"mute\" value=\"0\">\n" strTemp += " <param name=\"playCount\" value=\"1\">\n" strTemp += " <param name=\"rate\" value=\"1\">\n" strTemp += " <param name=\"uiMode\" value=\"none\">\n" strTemp += " <param name=\"volume\" value=\"100\">\n" strTemp += " <param name=\"URL\" value=\"" + url + "\">\n" strTemp += "</object>\n<font class=HighLight style=\"background-color: #EEE;padding: 8px;height:30px;width:100%\">" strTemp += "<b>點播的歌曲: <marquee width=30% speed=3><font color=red id=songName>" + songName + "</font></marquee>" strTemp += " [<font id=pos></font>]" strTemp += " [<font onclick=playAndpauseIt() style='cursor:hand;' id=" + status + ">播放</font>]" strTemp += "[<font onclick=stopIt() style='cursor:hand;'>停止</font>]" if((arrPL.length - 2) >= 0){ strTemp += "[<font onclick=prePlay() style='cursor:hand;'>上曲</font>]" strTemp += "[<font onclick=nxtPlay() style='cursor:hand;'>下曲</font>]" } strTemp += " </b>" document.getElementById('player').innerHTML = strTemp temptimer=setInterval('showTimer()',1000); } function playX(cur){ PlayIt(cur) clearIt() setIt(cur) curId = cur selected = cur } function MakeList(Id,Url,Name){ arrPL[cur] = new songObj(Id,Url, Name) cur++ } function loopIt(){ if(isLoop){ document.getElementById('sloop').innerText = "不循環" isLoop = false }else{ document.getElementById('sloop').innerText = "循環播放" isLoop = true } } /* Code End */ window.attachEvent('onload', function(){ InitPlay("女人如煙[詞曲:穆真 演唱:魏佳藝]","http://happy369.com/yy/nrry.mp3", 1); playAndpauseIt(); }) </script> <div id=player style="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地址,第三個參數是歌曲的名稱。說明都寫在注釋裡了,歡迎大家閱讀和參考。