狗貓的家！Xuite名稱的由來＆使用秘笈

網友ping覺得想保留Xuite的播放面版，再加上我製作的播放按鈕，形成一個新的播放器，但是我覺得如何有兩個播放>按鈕總是會讓人攪混，所以我想到將Xuite的播放面版只保留上半部具有音樂曲名顯示的部份，然後加上我的播放按鈕(因為按鈕有些訊息要露出，所以我還是保留訊息顯示窗)，形成

這一次是將原本這一篇http://blog.xuite.net/jeanson61/xuite/13439988的播放器語法做一個調整，將上下對調，Xuite播放器的訊息窗(歌曲名稱)，保留下來約為29pixels的高度。
。
然後下方的按鈕變成
，
將原本的Xuite logo改掉，因為出現兩個Xuite Logo還蠻怪的，那原本Xuite Logo的地方被我弄成會連接到教學的文章，所以乾脆把它改為狗貓Logo。讓狗貓打一下知名度 嘿嘿。

如果你喜歡這個播放器面版↓

那就將下面這段語法貼進自訂欄位/自由欄位中，貼進自由欄位的教學可以參考http://blog.xuite.net/jeanson61/xuite/13068194。
語法如下↓

===========================================================

<script language="javascript">
var objMmInfo = null;
var play_this = 0;
var old_p_idx;
var startFlag;
var tt1;
var random_play = true;
var repeatFlag = 0;
var curTimmer = null;
var startPlayTime, stopRepeatTime;
var VlogPlayerHeight = 29;

function mkMmPath(u,d){
   this.mmUrl = u;
   this.mmDur = d;
}

function mkMusicList(u,d){
   var cu = u;
   var cd = d;
   var idx = 0;
   if(objMmInfo == null){objMmInfo=new Array(); idx=0;}
   else {idx=objMmInfo.length;}
   if(u=="" || u==null){cu="";}
   if(d=="" || d==null){cd=0;}
   objMmInfo[idx]=new mkMmPath(cu,cd);
}

mkMusicList("QVZRRzYxLTI0OTQ2Ni5mbHY",599000);
mkMusicList("aHRwTkQzLTI0OTU3Mi5mbHY",413000);
mkMusicList("SWMzcnozLTI0OTgxMS5mbHY",599000);
mkMusicList("b2pBaEtlLTI0OTk2Ny5mbHY",519000);

var my_url = top.location.toString() ;
if (my_url.search(/^http:\/\/blog.xuite.net\/jeanson61\/xuite(\/?|\?.+)$/) != -1) {
         startFlag= 1;
} else if (my_url.search(/^http:\/\/blog.xuite.net\/jeanson61\/xuite\/\d+(\/?|\?.+)$/) != -1) {
         startFlag= 0;
} else {
         startFlag= 0;
}

function doVlogPlayer() {
   tt1="<iframe marginwidth='0' marginheight='0'"
   +" src='http://vlog.xuite.net/vlog/guest/external.php?media_id="
   + objMmInfo[play_this].mmUrl+"=&pt=2&ar="+repeatFlag+"&as="+startFlag+"' frameborder='0'"
   +" width='181' scrolling='no' height='"+VlogPlayerHeight+"'>"+"</iframe>";
   myOwnMusic.innerHTML = tt1;
}

function playNextMusic(P_or_N) {
   if(repeatFlag && (P_or_N == "C")) {
      doVlogPlayer();
      if (startFlag) {
         startPlayTime = new Date();
         imgChanged("playt",1);
      }
      return;
   } else  {
      old_p_idx = play_this;
      if (random_play) {
         do{
            play_this=Math.floor(Math.random() * objMmInfo.length);
         }while(play_this == old_p_idx && objMmInfo.length != 1);
      } else {
         if (objMmInfo.length != 1) {
            if (P_or_N == "P") {
               play_this = play_this - 1;
               if (play_this == -1) play_this = objMmInfo.length - 1;
            } else {
               play_this = play_this + 1;
               if (play_this == objMmInfo.length) play_this = 0;
            }
         }
      }
      if (startFlag == 1) {
         doVlogPlayer();
         startPlayTime = new Date();
         if (!repeatFlag) curTimmer = setTimeout('playNextMusic("C")', objMmInfo[play_this].mmDur);  
         titleDisplay.innerHTML = "停止音樂請按■鈕";
         imgChanged("playt",1);
      } else {
         doVlogPlayer();
         titleDisplay.innerHTML = "聽音樂請按＞鈕";
      }
   }
}
function do_play(){
   if(startFlag){ return;}
   startFlag = 1;
   doVlogPlayer();
   startPlayTime = new Date();
   imgChanged("stopt",0);
   imgChanged("playt",1);
   curTimmer = setTimeout('playNextMusic("C")', objMmInfo[play_this].mmDur);
   titleDisplay.innerHTML = "停止音樂請按■鈕";
}

function do_stop(){
   if(!startFlag){ return;}
   startFlag = 0;
   doVlogPlayer();
   clearTimeout(curTimmer);
   imgChanged("playt",0);
   imgChanged("stopt",1);
   titleDisplay.innerHTML = "聽音樂請按＞鈕";
}
function playPrev(){
   titleDisplay.innerHTML = "切換前一首音樂";
   clearTimeout(curTimmer);
   setTimeout('playNextMusic("P")', 500);
}

function playNext(){
   titleDisplay.innerHTML = "切換下一首音樂";
   clearTimeout(curTimmer);
   setTimeout('playNextMusic("N")', 500);
}
function chgPMode(){
   if(random_play){
      random_play = false; imgChanged("pmode",0);
      titleDisplay.innerHTML = "循序播放模式";
   } else {
      random_play = true; imgChanged("pmode",1);
      titleDisplay.innerHTML = "隨機播放模式";
   }
}
function chkRept(){
   if(repeatFlag == 1){
      stopRepeatTime = new Date();
      repeatFlag = 0; imgChanged("rept",0);
      titleDisplay.innerHTML = "不反覆播放同首音樂";
      if (startFlag)
         curTimmer = setTimeout('playNextMusic("C")', objMmInfo[play_this].mmDur-(stopRepeatTime -

startPlayTime)%objMmInfo[play_this].mmDur);
   } else {
     repeatFlag = 1; imgChanged("rept",1);
     titleDisplay.innerHTML = "反覆播放同首音樂";
   }
}

toggleKey = new Object();
toggleKey[0] = "_off";
toggleKey[1] = "_on";

function imgChanged(id,act){
 if(document.images){ document.images[id].src = eval("imgBtn." + id + toggleKey[act] + ".src");}
}
if(document.images){
 imgBtn = new Object();
 imgBtn.pmode_off = new Image();
 imgBtn.pmode_off.src = "http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/2.gif";
 imgBtn.pmode_on = new Image();
 imgBtn.pmode_on.src = "http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/3.gif";
 imgBtn.rept_off = new Image();
 imgBtn.rept_off.src = "http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/4.gif";
 imgBtn.rept_on = new Image();
 imgBtn.rept_on.src = "http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/5.gif";
 imgBtn.playt_off = new Image();
 imgBtn.playt_off.src = "http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/6.gif";
 imgBtn.playt_on = new Image();
 imgBtn.playt_on.src = "http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/38.gif";
 imgBtn.stopt_off = new Image();
 imgBtn.stopt_off.src = "http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/10.gif";
 imgBtn.stopt_on = new Image();
 imgBtn.stopt_on.src = "http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/39.gif";
}
</script>

<div id='playerHeader'>
<table width=182 border=1 border-color=#666666 align=center cellpadding=0 cellspacing=0 hspace=0 vspace=0>
<tbody><tr><td colspan=3 width=182 height=15 style="background: #EBEBEB;"><div id='myOwnMusic' align=center></div></td></tr>
<tr><td width=57 height=27 align=right style=" background: #EBEBEB" ><img src="http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/13624822/0.gif" border=0 onClick= window.open("http://blog.xuite.net/jeanson61/xuite/13624822","mplist",",scrollbars=yes,resizable=yes,copyhistory=yes") style="cursor:hand" title="音樂播放器修改者─狗貓的網站"></td>
<td colspan=2 width=125 height=22 style="background: #EBEBEB;">
<span class="content"><font color="#666666"><div id="titleDisplay" align=center>準備中...</div></font></span></td></tr>
<tr><td colspan=3 width=182 height=27 style="background: #EBEBEB; valign:bottom;" nowrap>&nbsp;     
<img name="playt" src="http://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="stopt" src="http://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="http://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="http://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="下一首曲目">
<img name="pmode" src="http://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="播放順序 (≡循序 ＊隨機)">
<img name="rept"  src="http://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>
</tbody></table>
</div>
<script language="javascript">
playNextMusic("C");
</script>

===========================================================

語法中只要修改
A. mkMusicList("QVZRRzYxLTI0OTQ2Ni5mbHY",599000);
看你有幾首歌，就弄幾段mkMusicList("media_id", 音樂長度);
這個media_id就是Xuite影音Vlog的內嵌語法(embed)中的media_id↓
<iframe marginwidth='0' marginheight='0' frameborder='0' scrolling='no' width='185px' height='65px' src='http://vlog.xuite.net/vlog/guest/external.php?media_id=b2pBaEtlLTI0OTk2Ny5mbHY=&pt=2&ar=0&as=0'></iframe>

或是網頁上方網址裡面的↓
http://vlog.xuite.net/vlog/guest/basic.php?media_id=b2pBaEtlLTI0OTk2Ny5mbHY=

以上面這個為例，就是b2pBaEtlLTI0OTk2Ny5mbHY ，就是語法中的media_id=xxxxxx=，兩個等於中間的字串啦！！可以閱讀之前寫的文章，以便知道Xuite影音檔的檔名(media_id)是如何取得，請看這一篇http://blog.xuite.net/jeanson61/xuite/13068194

至於音樂長度(單位為毫秒)，這個例子是音樂長度為9分59秒，所以換算成毫秒是(9x60+59)x1000= (540+59)x1000= 599000。保險一點可以加上1秒(也就是1000毫秒)，因為我的程式中是透過這個時間長度來計時切換Flash影音檔，因為程式處理時效上感覺會在音樂最後一秒還沒結束就被切換，所以如果龜毛一點的話，就加一秒吧！

所以就請你自己將這音樂的media_id找出來，以及其音樂長度算一下就完成了。這個語法範例是放了四首！
mkMusicList("QVZRRzYxLTI0OTQ2Ni5mbHY",599000);
mkMusicList("aHRwTkQzLTI0OTU3Mi5mbHY",413000);
mkMusicList("SWMzcnozLTI0OTgxMS5mbHY",599000);
mkMusicList("b2pBaEtlLTI0OTk2Ny5mbHY",519000);
如果有更多首，就繼續加上mkMusicList("media_id", 音樂長度);這樣的語法上去就是啦！

B. 至於var random_play = true;這部份指的是音樂要隨機(Random)選音樂還是循序(Sequence)播放，所以要改循序播放時就請改為var random_play = false;就好
不過如果一開始要是循序播放，還要改一下
<img name="pmode" src="http://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="播放順序 (≡循序 ＊隨機)">
將圖片改為循序播放的按紐圖，改成
<img name="pmode" src="http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/2.gif" width=26 height=27 border=0 onClick="chgPMode()" style="cursor:hand" title="播放順序 (≡循序 ＊隨機)">

C.my_url.search(/^http:\/\/blog.xuite.net\/jeanson61\/xuite(\/?|\?.+)$/) != -1
my_url.search(/^http:\/\/blog.xuite.net\/jeanson61\/xuite\/\d+(\/?|\?.+)$/) != -1

請在語法中的判斷if (my_url.search(/^http://blog.xuite.net/帳號名稱/日誌網址(/?|?.+)$/) != -1)裡面的帳號名稱，日誌網址部份改成你自己的相關資料。這裡的例子是狗貓我自己的帳號與網址！
請自行修改灰底段落裡面的帳號名稱，日誌網址 ！
詳細說明帳號及網址的規則還是請參考http://blog.xuite.net/jeanson61/xuite/4564412這一篇說明！看不懂再問啦！

D.如果不喜歡切掉Xuite影音播放器面版下方的控制按鈕，那麼請調整一下它的顯示高度，var VlogPlayerHeight = 29;，讓它變成65，它就恢復啦