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 相关文章推荐
用脚本调用样式的几种方法
Dec 09 Javascript
用JavaScript实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
Javascript Cookie读写删除操作的函数
Mar 02 Javascript
遍历jquery对象的代码分享
Nov 02 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
Sep 14 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
用JS实现选项卡
Mar 23 Javascript
jquery实现拖拽小方块效果
Dec 10 jQuery
详解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获取后台Job管理的实现代码
2011/06/10 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
JS阻止用户多次提交示例代码
2014/03/26 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
详解Python文本操作相关模块
2017/06/22 Python
python使用opencv读取图片的实例
2017/08/17 Python
pycharm远程调试openstack代码
2017/11/21 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
汽车运用工程毕业生自荐信
2013/10/29 职场文书
办公室前台岗位职责范本
2013/12/10 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
计划生育汇报材料
2014/12/26 职场文书
苏州园林导游词
2015/02/03 职场文书
北京导游词
2015/02/12 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书