简单的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; 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 οnclick=playAndpauseIt() style='cursor:hand;' id= "   +  status  +   " >播放</font>] "
strTemp  +=   " [<font οnclick=stopIt() style='cursor:hand;'>停止</font>] "
if ((arrPL.length  -   2 )  >=   0 ){
strTemp  +=   " [<font οnclick=prePlay() style='cursor:hand;'>上曲</font>] "
strTemp  +=   " [<font οnclick=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地址，第三个参数是歌曲的名称