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

2019-11-20 10:26:08

字体：大中小

来源：转载

供稿：网友

代码较最基础的播放器实现增加了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.0Edited By LovelyLifeAt 2006-09-16All rights reserveredCode StartModify by http://www.tt419.cn/ *************************************************************/var playid = "LovelyLifePlayer"var status = "status"var curId,arrPL,selectedvar isStop,isLooparrPL = new Array()  //播放器列表cur = 0curId = 0isStop = falseselected = 0isLoop = truefunction songObj(Id,url, name){this.Id  = Idthis.url = urlthis.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 = truedocument.getElementById(status).innerHTML ='播放'document.getElementById(playid).controls.stop()}function showTimer(){var cp=document.getElementById(playid).controls.currentPositionvar cps=document.getElementById(playid).controls.currentPositionStringvar dur=document.getElementById(playid).currentMedia.duration;var durs=document.getElementById(playid).currentMedia.durationString;var s = document.getElementById(playid).playStatevar o = document.getElementById(playid).openStateif( s==2 || s==3)document.getElementById('pos').innerText = " " + cps + "/" + durs + " "elsedocument.getElementById('pos').innerText = " 00:00/" + durs + " "if( s == 1 ){if(isLoop && (curId > (arrPL.length - 1))){curId = 0return 0}clearIt()if(curId<0 || curId>arrPL.length){alert("当前没有歌曲！，请查看播放列表！")return false}nxtPlay()}if( s == 10 && arrPL.length >0 )nxtPlay()}function nxtPlay(){isStop = trueif(curId > arrPL.length - 1){document.getElementById("songName").innerText = "没有歌曲了，请选择上一曲!"document.getElementById(playid).URL = "NULL"return false}curId++clearIt()setIt(curId)PlayIt(curId)}function prePlay(){isStop = trueif(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 = cidif(url == "None"){document.getElementById("songName").innerText = "加载歌曲未找到!播放下一曲！"nxtPlay()return false}document.getElementById(playid).URL = urldocument.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=" + playidstrTemp += " 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 = strTemptemptimer=setInterval('showTimer()',1000);}function playX(cur){PlayIt(cur)clearIt()setIt(cur)curId = curselected = 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地址，第三个参数是歌曲的名称。说明都写在注释里了，欢迎大家阅读和参考。

上一篇：理解javascript正则表达式

下一篇：详解JavaScript数组和字符串中去除重复值的方法