足球游戏_中国足彩网¥体育资讯$

JavaScript实现带播放列表的音乐播放器实例分享
来源:易贤网 阅读:1248 次 日期:2016-07-22 15:50:11
温馨提示:易贤网小编为您整理了“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 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地址,第三个参数是歌曲的名称。说明都写在注释里了,欢迎大家阅读和参考。

中国足彩网信息请查看网络编程
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标