搞了好幾天,終於利用一些時間將播放器完全改版了,因為之前的播放器按鈕看起來不夠漂亮,語法中也有些狀況,會有連不到音樂的問題,不知道為什麼!索性拿Xuite內定的播放器的語法來改寫播放語法!然後保留之前http://blog.xuite.net/jeanson61/xuite/11497956這篇的音樂清單建立模式(很單純很簡單的編排),現在這個版本狗貓很滿意,不過沒測試過FireFox瀏覽器是否沒問題!反正先Post出來,有問題請通知我,謝謝啦。新播放器版面會像

 整個播放器上方的網狀顯示區塊,綠色字體是延用Xuite Blog裡面的語法與圖樣,接著下方的Xuite Logo會連到我的網站之教學文章(也就是這一篇文章,讓我狗貓打一下廣告、知名度),後方接著是Copy自ExoBUD播放器的狀態顯示窗,顯示曲目時間、播放時間以及按鈕時的功能切換提示。至於按鈕是狗貓做的,有些按鈕要做按凹下去並不是很漂亮,大家就將就點用吧,畢竟狗貓不是美工出身,做這些不在行

好啦,就貼語法在下面,自己Copy貼進自由欄位中,當然要改成你自己要的音樂啦!

 


<script language="javascript">
var musicTypeRandom=false;
var startFlag= true;
var blnRept = flase;
var vmax = 100;
var vmin = 0;
var vdep = 10;
var objMmInfo = null;
var intMmCnt = 0;
var p_idx = 0;
var old_p_idx = 0;
var intErrCnt=0;
var tidTLab = null;
var tidErr = null;
var tidMsg = null;
var blnElaps = true;
var blnStatusBar = false;
function mkMmPath(u,t){
 this.mmUrl = u;
 this.mmTit = t;
 this.mmDur = 0;
  }
function mkMusicList(u,t){
 var cu = u;
 var ct = t;
 var idx = 0;
if(objMmInfo == null){objMmInfo=new Array(); idx=0;}
 else {idx=objMmInfo.length;}
 if(u=="" || u==null){cu="mms://";}
 if(t=="" || t==null){ct="nAnT";}
objMmInfo[idx]=new mkMmPath(cu,ct);
 var trknum=idx+1;
 var ctit =objMmInfo[idx].mmTit;
 if(ctit=="nAnT"){ctit="(沒有媒體標題)"}
 objMmInfo[idx].mmTit = "T" + trknum + ". " + ctit;
intMmCnt = objMmInfo.length;
}
function do_play(){
      if(music_box.playState==3){ return;}
if(music_box.playState==2){
             music_box.controls.play();
      }else{          
             if (musicTypeRandom){
                   p_idx=Math.floor(Math.random() * objMmInfo.length);
                   music_box.URL= objMmInfo[p_idx].mmUrl;
                   show_title(objMmInfo[p_idx].mmTit);
             }else{
                   old_p_idx = p_idx;
                   music_box.URL= objMmInfo[p_idx].mmUrl;
                 show_title(objMmInfo[p_idx].mmTit);              
             }
      }
}
function do_pause(){
 clearInterval(tidTLab);
 clearTimeout(tidMsg);
 if(music_box.playState==2){ music_box.controls.play();}
 else if(music_box.playState==3){ music_box.controls.pause(); displ2.innerHTML="暫停";
tidMsg=setTimeout("rtnTLab()",1500);}
 return;
}
function do_stop(){
 intErrCnt=0;
 clearTimeout(tidErr);
 clearInterval(tidTLab);
 imgChanged("stopt",1);
 imgChanged("pauzt",0);
 imgChanged("scope",0);
 showTLab();
 music_box.controls.stop();
 music_box.close();
 titleDisplay.innerHTML = "播放停止;聽音樂請按播放鈕>";
 if(blnStatusBar){ window.status= ("播放停止;聽音樂請按播放鈕>");return true;}
}
function playPrev(){
 if(music_box.playState==2 || music_box.playState==3) {music_box.controls.stop();}
 show_status("轉換前一首,請稍後..");
if (musicTypeRandom){
      setTimeout("do_next_random()",1000);
}else{
      setTimeout("do_prev_order()",1000);
}
}
function playNext(){
 if(music_box.playState==2 || music_box.playState==3) {music_box.controls.stop();}
 show_status("轉換下一首,請稍後..");
if (musicTypeRandom){
      setTimeout("do_next_random()",1000);
}else{
      setTimeout("do_next_order()",1000);
}
}
function showTLab(){
 var ps = music_box.playState;
 if(ps==2 || ps==3){
   var cp=music_box.controls.currentPosition;
   var cps=music_box.controls.currentPositionString;
   var dur=music_box.currentMedia.duration;
   var durs=music_box.currentMedia.durationString;
   if(blnElaps){
     displ2.innerHTML = cps + " | " + durs;
     var msg = objMmInfo[p_idx].mmTit + " (" + cps + " | " + durs + ")";
     if(ps==2){msg = "(暫停) " + msg;}
     if(blnStatusBar){ window.status=(msg);return true;}
   } else {
     var laps = dur-cp;
     var strLaps = wmpTime(laps);
     displ2.innerHTML = strLaps + " | " + durs;
     var msg = objMmInfo[p_idx].mmTit + " (" + strLaps + " | " + durs + ")";
     if(ps==2){msg = "(暫停) " + msg;}
     if(blnStatusBar){ window.status=(msg);return true;}
   }
 } else {
   displ2.innerHTML = "00:00 | 00:00";
 }
}
function wmpTime(dur){
 var hh, min, sec, timeLabel;
 hh=Math.floor(dur/3600);
 min=Math.floor(dur/60)%60;
 sec=Math.floor(dur%60);
 if(isNaN(min)){ return "00:00";}
 if(isNaN(hh) || hh==0){timeLabel="";}
 else {
   if(hh>9){timeLabel = hh.toString() + ":";}
   else {timeLabel = "0" + hh.toString() + ":";}
 }
 if(min>9){timeLabel = timeLabel + min.toString() + ":";}
 else {timeLabel = timeLabel + "0" + min.toString() + ":";}
 if(sec>9){timeLabel = timeLabel + sec.toString();}
 else {timeLabel = timeLabel + "0" + sec.toString();}
 return timeLabel;
}
function rtnTLab(){
 clearTimeout(tidMsg);
 if(music_box.playState ==3){tidTLab=setInterval("showTLab()",2000);}
 else {showTLab();}
}
function chgTimeFmt(){
 if(music_box.playState ==3){clearInterval(tidTLab);}
 if(blnElaps){
   blnElaps=false; displ2.innerHTML="倒數方式";
 } else {
   blnElaps=true; displ2.innerHTML="正常方式";
 }
 tidMsg=setTimeout("rtnTLab()",2000);
}
function doThe_Init(){
if (objMmInfo.length > 0){
      if(blnRept){imgChanged("rept",1);}  else {imgChanged("rept",0);}
        if (startFlag == true){        
             if (musicTypeRandom){
                   p_idx=Math.floor(Math.random() * objMmInfo.length);
                   music_box.URL= objMmInfo[p_idx].mmUrl;
                   show_title(objMmInfo[p_idx].mmTit);
             }else{
                   p_idx=0;
                   old_p_idx = p_idx;
                   music_box.URL= objMmInfo[p_idx].mmUrl;
                 show_title(objMmInfo[p_idx].mmTit);
            imgChanged("pmode",0);
             }
        }else{
             show_title("如果要聽音樂請按>");
        if (!musicTypeRandom) { imgChanged("pmode",0);}
        }
      }else{
             show_title("沒有設定音樂清單");
      }
}
function do_next_random(){
      document.music_box.controls.stop();           
      old_p_idx = p_idx;
      do{
             p_idx=Math.floor(Math.random() * objMmInfo.length);
      }while(p_idx == old_p_idx && objMmInfo.length != 1);
      music_box.URL= objMmInfo[p_idx].mmUrl;
      music_box.controls.play();
      show_title(objMmInfo[p_idx].mmTit);
}
function do_next_order(){
      document.music_box.controls.stop();
      old_p_idx = p_idx;
      p_idx=(p_idx<( objMmInfo.length -1))?(p_idx+1):(0);
      music_box.URL= objMmInfo[p_idx].mmUrl;
      music_box.controls.play();
      show_title(objMmInfo[p_idx].mmTit);
}
function do_prev_order(){
      document.music_box.controls.stop();
      old_p_idx = p_idx;
      p_idx=p_idx-1;
      if (p_idx < 0) {p_idx=objMmInfo.length-1};
      music_box.URL= objMmInfo[p_idx].mmUrl;
      music_box.controls.play();
      show_title(objMmInfo[p_idx].mmTit);
}
function do_repeat(){
      document.music_box.controls.stop();
      music_box.URL= objMmInfo[p_idx].mmUrl;
      music_box.controls.play();
      show_title(objMmInfo[p_idx].mmTit);
}
function doMute(){
 if(music_box.playState==3){clearInterval(tidTLab);}
 if(!music_box.settings.mute){
  music_box.settings.mute=true;
 displ2.innerHTML="開啟靜音模式";
 imgChanged("vmute",1);
 } else {
  music_box.settings.mute=false;
 displ2.innerHTML="關閉靜音模式";
 imgChanged("vmute",0);
 }
 tidMsg=setTimeout("rtnTLab()",2000);
}
function doVolDn(){
 if(music_box.playState==3){clearInterval(tidTLab);}
 if(music_box.settings.mute){ music_box.settings.mute=false;
    displ2.innerHTML="音量恢復"; imgChanged("vmute",0);}
 else {
   if(music_box.settings.volume <= vdep){ music_box.settings.volume = vmin;}
   else { music_box.settings.volume = music_box.settings.volume - vdep;}
   displ2.innerHTML = "音量: " + music_box.settings.volume + "%";
 }
 tidMsg=setTimeout("rtnTLab()",2000);
}
function doVolUp(){
 if(music_box.playState==3){clearInterval(tidTLab);}
 if(music_box.settings.mute){ music_box.settings.mute=false;
displ2.innerHTML="音量恢復"; imgChanged("vmute",0);}
 else {
   if(music_box.settings.volume >= (vmax-vdep)){
     music_box.settings.volume = vmax;}
   else { music_box.settings.volume = music_box.settings.volume + vdep;}
   displ2.innerHTML = "音量: " + music_box.settings.volume + "%";
 }
 tidMsg=setTimeout("rtnTLab()",2000);
}
function chgPMode(){
 if(music_box.platState==3){clearInterval(tidTLab);}
 if(musicTypeRandom){
    musicTypeRandom =false; imgChanged("pmode",0);
   displ2.innerHTML="循序播放";
 } else {
   musicTypeRandom = true; imgChanged("pmode",1);
  displ2.innerHTML="隨機播放";
 }
 tidMsg=setTimeout("rtnTLab()",2000);
}
function chkRept(){
 if(music_box.platState==3){clearInterval(tidTLab);}
 if(blnRept){
   blnRept=false; imgChanged("rept",0); displ2.innerHTML="不重複播放";
 } else {
   blnRept=true; imgChanged("rept",1); displ2.innerHTML="重複播放";
 }
 tidMsg=setTimeout("rtnTLab()",2000);
}
function show_status(msg){
      var msg;
      titleDisplay.innerHTML=msg;
}
function show_title(msg){
      var msg;
      titleDisplay.innerHTML=msg;
}
function event_buffer(info){
      var info;
      if(info){
      }else{
      }
}
function event_openState(info){
}
function event_playState(info){
      switch(info){
             case 1:
               evtStop();
            break;
         case 2:
               evtPause();
            break;
         case 3:
               evtPlay();
            break;
             case 8:
                   if(blnRept){ setTimeout("do_repeat()",1000);  break; }
show_status("轉換下一首,請稍後..");
                   if (musicTypeRandom){
                          setTimeout("do_next_random()",1000);
                   }else{
                          setTimeout("do_next_order()",1000);
                   }                            
             break;
             }
      }
function evtStop(){
 clearTimeout(tidErr);
 clearInterval(tidTLab);
 showTLab();
 intErrCnt=0;
 imgChanged("pauzt",0);
 imgChanged("playt",0);
 imgChanged("scope",0);
 titleDisplay.innerHTML = "[等待播放下一首曲目]";
 if(blnStatusBar){ window.status=("[等待播放下一首曲目]");return true;}
}
function evtPause(){
 imgChanged("pauzt",1)
 imgChanged("playt",0);
 imgChanged("stopt",0);
 imgChanged("scope",0);
 clearInterval(tidTLab);
 showTLab();
}
function evtPlay(){
 imgChanged("pauzt",0)
 imgChanged("playt",1);
 imgChanged("stopt",0);
 imgChanged("scope",1);
 tidTLab=setInterval("showTLab()",2000);
}
mkMusicList("http://c.mms.blog.xuite.net/c/f/7/b/11732000/blog_102/dv/195474/195474.mp3","古典鋼琴小品");
mkMusicList("
http://c.mms.blog.xuite.net/c/f/7/b/11732000/blog_102/dv/195473/195473.mp3","古典鋼琴小品");
mkMusicList("
http://c.mms.blog.xuite.net/c/f/7/b/11732000/blog_102/dv/170761/170761.mp3","古典音樂小品");
mkMusicList("
http://c.mms.blog.xuite.net/c/f/7/b/11732000/blog_102/dv/170755/170755.mp3","古典音樂小品");
</script>
<script language="JavaScript">
toggleKey = new Object();
toggleKey[0] = "_off";
toggleKey[1] = "_on";
toggleKey[2] = "_ovr";
toggleKey[3] = "_out";
toggleKey[4] = "_mdn";
toggleKey[5] = "_mup";
function imgChanged(id,act){
 if(document.images){ document.images[id].src = eval("imgBtn." + id + toggleKey[act] + ".src");}
}
if(document.images){
 imgBtn = new Object();
 imgBtn.vmute_off = new Image();
 imgBtn.vmute_off.src = "//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/0.gif";
 imgBtn.vmute_on = new Image();
 imgBtn.vmute_on.src = "//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/34.gif"; 
 imgBtn.pmode_off = new Image();
 imgBtn.pmode_off.src = "//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/2.gif";
 imgBtn.pmode_on = new Image();
 imgBtn.pmode_on.src = "//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/3.gif";
 imgBtn.rept_off = new Image();
 imgBtn.rept_off.src = "//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/4.gif";
 imgBtn.rept_on = new Image();
 imgBtn.rept_on.src = "//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/5.gif";
 imgBtn.playt_off = new Image();
 imgBtn.playt_off.src = "//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/6.gif";
 imgBtn.playt_on = new Image();
 imgBtn.playt_on.src = "//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/7.gif";
 imgBtn.pauzt_off = new Image();
 imgBtn.pauzt_off.src = "//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/22.gif";
 imgBtn.pauzt_on = new Image();
 imgBtn.pauzt_on.src = "//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/23.gif";
 imgBtn.stopt_off = new Image();
 imgBtn.stopt_off.src = "//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/10.gif";
 imgBtn.stopt_on = new Image();
 imgBtn.stopt_on.src = "//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/11.gif";
 imgBtn.scope_off = new Image();
 imgBtn.scope_off.src = "//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/30.jpg";
 imgBtn.scope_on = new Image();
 imgBtn.scope_on.src = "http://s.blog.xuite.net/_image/blog028_1.gif";
}
</script>
<script language="JScript" for="music_box" event="openStateChange(info)">event_openState(info); </script>
<script language="JScript" for="music_box" event="playStateChange(info)">event_playState(info);</script>
<script language="JScript" for="music_box" event="Buffering(info)">event_buffer(info);</script>
<script language="javascript">
doThe_Init;
</script>

<object id="music_box" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
  type="application/x-oleobject" width="0" height="0"
  style="position:relative;left:0px;top:0px;width:0px;height:0px;">
  <param name="autoStart" value="true">
  <param name="balance" value="0">
  <param name="currentPosition" value="0">
  <param name="currentMarker" value="0">
  <param name="enableContextMenu" value="false">
  <param name="enableErrorDialogs" value="false">
  <param name="enabled" value="true">
  <param name="fullScreen" value="false">
  <param name="invokeURLs" value="false">
  <param name="mute" value="false">
  <param name="playCount" value="1">
  <param name="rate" value="1">
  <param name="uiMode" value="none">
  <param name="volume" value="100">
</object>
<table width=170 border=0 align=center cellspacing=0 cellpadding=0>
<tr>
<td width="4%" background="/_image/blog028_bg.gif">
<img name="scope" src="//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/30.jpg" width="20" height="20">
</td>
<td width="96%" background="/_image/blog028_bg.gif">
<span class="content"><font color="#55EC51"><div id="titleDisplay">準備中‧‧‧</div></font></span>
</td>
</tr>
</table>
<table width=170 border=0 align=center cellpadding=0 cellspacing=0>
<tr><td width=64 height=28 align=right style=" background: #EBEBEB" >
<img src="//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/33.gif" border=0 onClick= window.open("http://blog.xuite.net/jeanson61/xuite/11577478","mplist",",scrollbars=yes,resizable=yes,copyhistory=no") style="cursor:hand" title="音樂播放器修改者─狗貓的網站"></td>
  <td width=106 height=28 align=center background= "//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/21.gif " nowrap onClick="chgTimeFmt()">
      <span id="displ2" class="time" title="時間長度顯示方式 (正常/倒數)" style="width:106; cursor:hand">00:00 | 00:00</span>
  </td></tr>
  <tr>   
  <td COLSPAN=2 height=27 align="center" style=" background: #EBEBEB; vertical-align:text-top" nowrap>&nbsp;     
 <img name="playt" src="//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/6.gif" width=26 height=27 border=0 onClick="do_play()" style="cursor:hand" title="播放">
      <img name="pauzt" src="//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/22.gif" width=26 height=27 border=0 onClick="do_pause()" style="cursor:hand" title="暫停.繼續">
      <img name="stopt" src="//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/10.gif" width=26 height=27 border=0 onClick="do_stop()" style="cursor:hand" title="停止">
     <img name="prevt" src="//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/31.gif" width=26 height=27 border=0 onClick="playPrev()" style="cursor:hand" title="上一首曲目">
<img name="nextt" src="//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/32.gif" width=26 height=27 border=0 onClick="playNext()" style="cursor:hand" title="下一首曲目">
  </td>  </tr>
  <td COLSPAN=2 height=27 align="center" style=" background: #EBEBEB; vertical-align:text-top" nowrap>&nbsp;     
 <img name="vmute" src="//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/0.gif" width=26 height=27 border=0 onClick="doMute()" style="cursor:hand" title="靜音模式">
      <img name="vdn"   src="//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/12.gif" width=26 height=27 border=0 onClick="doVolDn()" style="cursor:hand" title="減少音量">
      <img  name="vup"   src="//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/13.gif" width=26 height=27 border=0 onClick="doVolUp()" style="cursor:hand" title="增加音量">
      <img name="pmode" src="//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/3.gif" width=26 height=27 border=0 onClick="chgPMode()" style="cursor:hand" title="播放順序 (S=循序 R=隨機)">
      <img name="rept"  src="//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/4.gif" width=26 height=27 border=0 onClick="chkRept()" style="cursor:hand" title="切換是否重複播放目前的曲目">
  </td></tr>
</table>
<script language="javascript">
doThe_Init();
</script>


 


這裡面有兩部份可以改,主要是藍色字與紅色字體部份,藍色字體是定義一些播放的參數↓
var musicTypeRandom=false;
var startFlag= true;
var blnRept = false;

musicTypeRandom=false;表示播放順序是循序,若是要用隨機播放就改為musicTypeRandom=true;
startFlag= true;表示網頁一開始顯示,音樂就自動開始自動播放。若是不要自動播放就改為startFlag= false;
blnRept = false;表示重複播放Loop不啟動,所以播放器不會一直重複播放同一首曲子,會一首接一首播放;若是你想一直播放同一首歌,那就改為blnRept = true;

紅色部份跟之前的語法一樣
mkMusicList("音樂網址URL", "音樂說明");
可以自己增加,寫兩行就有兩首,寫N行就N首。很簡單的!



隨機文章

×
網友回饋 回應:37
  • 歡迎來到隨意窩Xuite

    開啟選單瀏覽服務或以關鍵字搜尋。

     
  • 瀏覽更多精彩內容

    切換至格主其他頻道或直接搜尋。

     
  • 快速便利分享工具

    提供多種分享方式傳遞內容資訊。

     
  • 更多推薦APP

    隨意遊與隨食記app僅支援ios裝置。