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


Posted in Javascript onMarch 07, 2016

代码较最基础的播放器实现增加了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 相关文章推荐
IE下window.onresize 多次调用与死循环bug处理方法介绍
Nov 12 Javascript
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 Javascript
如何用angularjs制作一个完整的表格
Jan 21 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
利用require.js与angular搭建spa应用的方法实例
Jul 19 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
vuex 实现getter值赋值给vue组件里的data示例
Nov 05 Javascript
Vue实现多标签选择器
Nov 28 Javascript
vue页面更新patch的实现示例
Mar 25 Javascript
详解JavaScript数组和字符串中去除重复值的方法
Mar 07 #Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 #Javascript
JavaScript中将数组进行合并的基本方法讲解
Mar 07 #Javascript
Bootstrap每天必学之日期控制
Mar 07 #Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 #Javascript
jquery+json实现分页效果
Mar 07 #Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 #Javascript
You might like
深入解析php中的foreach函数
2013/08/31 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
JavaScript面向对象编程
2008/03/02 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
2017/09/08 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
python 域名分析工具实现代码
2009/07/15 Python
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
使用pymysql查询数据库,把结果保存为列表并获取指定元素下标实例
2020/05/15 Python
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
生产车间主任的个人自我鉴定
2013/10/25 职场文书
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
特岗教师个人总结
2015/02/10 职场文书
活动总结模板大全
2015/05/11 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
事业单位岗位说明书
2015/10/08 职场文书
2016特色励志班级口号
2015/12/24 职场文书