zoukankan      html  css  js  c++  java
  • 简单的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地址,第三个参数是歌曲的名称

  • 相关阅读:
    C# 为WebBrowser设置代理,打开网页
    C# WebBrowser 设置代理完全解决方案
    java读取文件的几种方式性能比较
    .NET 对文件和文件夹操作的介绍
    java利用反射打印出类的结构
    java输出月的日历控制台
    java 实现二分查找算法
    java实现快速排序
    解决window 12 service 不能调用excel ,报"System.Runtime.InteropServices.COMException (0x800A03EC)
    3 webpack 4 加vue 2.0生产环境搭建
  • 原文地址:https://www.cnblogs.com/mqingqing123/p/1622347.html
Copyright © 2011-2022 走看看