JavaScript实现带播放列表的音乐播放器实例分享

代码较最基础的播放器实现增加了playlist，使用MakeList实现多首播放，有需要的可以直接使用：

rush:js;"> <html xmlns="http://www.w3.org/1999/xhtml">

Untitled Page /************************************************************* 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,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 += "\n<font class=HighLight style=\"background-color: #EEE;padding: 8px;height:30px;width:100%\">"
strTemp += "点播的歌曲: " + songName + ""
strTemp += " []"
strTemp += " [<font onclick=playAndpauseIt() style='cursor:hand;' id=" + status + ">播放]"
strTemp += "[停止]"
if((arrPL.length - 2) >= 0){
strTemp += "[上曲]"
strTemp += "[下曲]"
}
strTemp += " "
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,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();
})

MakeList参数：共3个参数，第一个是ID,第二个参数是音乐的URL地址，第三个参数是歌曲的名称。说明都写在注释里了，欢迎大家阅读和参考。

JavaScript js 播放列表播放列表歌单音乐播放器音频音频

JavaScript实现带播放列表的音乐播放器实例分享

相关文章