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地址,第三个参数是歌曲的名称。说明都写在注释里了,欢迎大家阅读和参考。



相关阅读:
Android UI设计系列之自定义DrawView组件实现数字签名效果(5)
Java正则表达式入门学习
PHP return语句另类用法不止是在函数中
MySQL 启动报错:File ./mysql-bin.index not found (Errcode: 13)
Win8系统如何定时运行程序?Win8系统定时运行程序的方法
jQuery鼠标悬浮链接弹出跟随图片实例代码
require.js的用法详解
CSS实现五颜六色按钮组成的导航条效果代码
1亿条记录的MongoDB数据库随机查询性能测试
将HTML的左右尖括号等转义成实体形式的两种实现方式
百度地图API应用之获取用户的具体位置
C/C++实现字符串模糊匹配
Windows8下设置蓝牙配对的操作步骤
详解MySQL的用户密码过期功能
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 信阳东-贵阳北 菏泽-焦作 武威-巴楚 邹城-兰考 北安-盖州 徐州-义乌 邯郸-惠农 白河东-石泉县 蛟河-沟帮子 大荔-襄汾西 石林-永州 杭州东-福州 宣城-平顶山 洛阳-东胜西 海石湾-蚌埠 桑根达来-陶赖昭 莱阳-怀化 任丘-长汀南 潮阳-福清 辛集-晋州 广安-合阳北 富源-茂名 公营子-承德 衡阳-韶关东 陇南-岷县 福州-万州 黔江-永川 临颍-达州 万源-聊城 石门县北-宜昌东 兴隆镇-泰康 温州-亳州 华山-吐鲁番 奈曼-集宁南 小河沿-奈曼 德安-鄂州 新乡-凤县 康金井-泰康 榆林-清涧县 沈阳北-海宁西 江油-信阳 漳州-潮阳 鄂州-莆田 建阳-武夷山 无锡-肥东 兰州-平安驿 肇庆-宜春 武夷山北-天津西 靖州-海石湾 哈尔滨西-青州市 锦州-肇东 宝鸡-鄂州 高密-河源 婺源-泰安 太谷-灵丘 南京南-上虞北 开封-晋城 靖宇-氡泉 资溪-汉中 烟台南-渑池南 岐山-霍州东 经棚-古鲁满汗 锦州南-通远堡西 唐山-南杂木 百里峡-十渡 嘉兴南-德兴 康城-龙华 孝感-磁县 佳木斯-卧里屯 福州-泰山 海安县-邳州 大连北-扶余北 上海南-向塘 滁州北-吉安 东莞东-韶关东 敬梓场-内江 惠州西-阜阳 太原南-天津南 上虞-湖口 镇平-嘉峪关 列车火车票z92多钱_列车火车票z92多钱
谁知道岳西哪里买到马里奥.毛瑞尔的海报啊
我买了一张从长沙到济南的火车列车票,要从郑州转车,到了郑州以后
从梁山到东平怎么走车多吗车票多少钱谢谢
急3月份从东京成田机场到福清长乐机场的机票是票价多少钱?
东莞从松山湖到石排福地市场改怎么坐车呢
大连到锦州客车最晚的几点发车
坐火车列车从大庆到贵阳怎样走最合适
北京到牡丹江汽车_北京到牡丹江火车
从山阴到壶口瀑布途经哪些旅游景点
苏州到北京的汽车客车几点的多少钱多长时间
从北京到河北容城林场怎么坐车
天龙八部网游 急求抢刷琼州、苗疆、黄龙府宝石的按键连点脚本...
求动力列车火车的歌
从郑州去巴黎自助游大概多少钱。
最可靠的物流货运,福州到湖北恩施
顺德容桂到衡阳常宁市物流发货票价多少钱一方
从沧州到沈阳详细驾车路线图
春天的慈溪峙山公园是什么样的
从新乡坐火车到大连要多久
广州列车火车站到佛山市南海区里水镇和桂工业园怎么坐车
一个人订两张票怎么取票,是拿一张身份证还是2张如果只是一
芜湖繁昌县马仁奇峰的门票价钱数格及从芜湖做什么车去
海口美兰机场打车到客车汽车东站要多少钱
大连到青岛最省钱的路线
河北承德淘宝网能邮到哪
我的驾照是江苏泰州的 在苏州开车违法掉头被开罚单 不去处理有没有问题
论当代中国建筑的发展
问一下大家 知道从福州到兰州 坐列车火车怎么走
从广坐汽车到湖北随州要多少钱?还有要多久的时间?

Copyright © 2016 phpStudy |