简单的JAVASCRIPT(JS)音乐播放器

增加了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; 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;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="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地址,第三个参数是歌曲的名称

原文地址:https://www.cnblogs.com/mqingqing123/p/1622347.html