JavaScript实现带播放列表的音乐播放器实例分享_Javascript教程-查字典教程网
JavaScript实现带播放列表的音乐播放器实例分享
JavaScript实现带播放列表的音乐播放器实例分享
发布时间:2016-12-30 来源:查字典编辑
摘要:代码较最基础的播放器实现增加了playlist,使用MakeList实现多首播放,有需要的可以直接使用:UntitledPage/*****...

代码较最基础的播放器实现增加了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 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 += ">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>" strTemp += "<b>点播的歌曲: <marquee width=30% speed=3><font color=red id=songName>" + songName + "</font></marquee>" strTemp += " [<font id=pos></font>]" strTemp += " [<font onclick=playAndpauseIt() id=" + status + ">播放</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地址,第三个参数是歌曲的名称。说明都写在注释里了,欢迎大家阅读和参考。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类