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

代码较最基础的播放器实现增加了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> <script> /************************************************************* LovelyLife Player V1.0 Edited By LovelyLife At 2006-09-16 All rights reservered Code Start Modify by *************************************************************/ 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 + "https://www.jb51.net/" + 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\" 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()>播放</font>]" strTemp += "[<font onclick=stopIt()>停止</font>]" if((arrPL.length - 2) >= 0){ strTemp += "[<font onclick=prePlay()>上曲</font>]" strTemp += "[<font onclick=nxtPlay()>下曲</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></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地址,第三个参数是歌曲的名称。说明都写在注释里了,欢迎大家阅读和参考。

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgyfxj.html