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 相关文章推荐
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
JavaScript实现select添加option
Jul 03 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
javaScript产生随机数的用法小结
Apr 21 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
js前端设计模式优化50%表单校验代码示例
Jun 21 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 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
javascript计时器详解
2015/02/28 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
windows下python和pip安装教程
2018/05/25 Python
用python爬取租房网站信息的代码
2018/12/14 Python
Python flask框架post接口调用示例
2019/07/03 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
项目经理聘任书
2014/03/29 职场文书
医院院务公开实施方案
2014/05/03 职场文书
大学生求职信例文
2014/06/29 职场文书
平遥古城导游词
2015/02/03 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
红楼梦读书笔记
2015/06/25 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server
MySQL创建管理HASH分区
2022/04/13 MySQL
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android