网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 JavaScript实现带播放列表的音乐播放器实例分享
内容
    代码较最基础的播放器实现增加了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>
    <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></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地址，第三个参数是歌曲的名称。说明都写在注释里了，欢迎大家阅读和参考。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/15 8:45:09