Implémentation JavaScript d'un lecteur de musique avec un exemple de liste de lecture, compétences Sharing

Implémentation JavaScript d'un lecteur de musique avec un exemple de liste de lecture, compétences Sharing_Javascript

WBOY

Libérer： 2016-05-16 15:11:34

original

1712 Les gens l'ont consulté

Le code ajoute une playlist par rapport à l'implémentation de lecteur la plus basique, et utilise MakeList pour implémenter plusieurs lectures. Si nécessaire, vous pouvez l'utiliser directement :
.

<!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>

Copier après la connexion

Paramètres MakeList : Il y a 3 paramètres au total. Le premier paramètre est l'ID, le deuxième paramètre est l'adresse URL de la musique et le troisième paramètre est le nom de la chanson. Les instructions sont toutes écrites dans les commentaires. Tout le monde est invité à les lire et à s'y référer.