JavaScript实现带播放列表的音乐播放器实例分享
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript实现带播放列表的音乐播放器实例分享,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含6044字,纯文字阅读大概需要9分钟。
内容图文
![JavaScript实现带播放列表的音乐播放器实例分享](/upload/InfoBanner/zyjiaocheng/354/12839be9d56d46ad875fc959c9743144.jpg)
代码较最基础的播放器实现增加了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地址,第三个参数是歌曲的名称。说明都写在注释里了,欢迎大家阅读和参考。
内容总结
以上是互联网集市为您收集整理的JavaScript实现带播放列表的音乐播放器实例分享全部内容,希望文章能够帮你解决JavaScript实现带播放列表的音乐播放器实例分享所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。