之前寫過教學,是拿Xuite影音平台的小播放當成背景音樂播放器,可以設定多首音樂中隨機抓一首反覆播放,除非你重新整理網頁,不然它只會一直播放同一首音樂(所謂隨機只是在網頁呈現時的隨機抓取,之後就一直固定,直到網頁因為點按到其他頁面或是按重新整理reload),今天要介紹一個可以解決這個問題的語法,它會在音樂播放完畢後切換另外一首音樂繼續播放,所以可以隨機播放或是循序播放,不去動網頁任何東西,它還是會一直換音樂輪播!

這個語法還將網友問的進入文章時是否不要自動播放一併也考慮了,所以只有在你的日誌首頁(列出一堆文章列表的那一個畫面)或是搜尋結果頁會自動播放音樂,其他狀況下都是手動!

可以先閱讀之前寫的文章,以便知道Xuite影音檔的檔名(media_id)是如何取得,請看這一篇http://blog.xuite.net/jeanson61/xuite/13068194

然後為了解決進入文章後不自動播放音樂的語法,有參考之前寫的這一篇教學:http://blog.xuite.net/jeanson61/xuite/4564412

整體語法如下↓
===========================================================

<script language="javascript">
var objMmInfo = null;
var play_this = 0;
var old_p_idx;
var startFlag;
var tt1;

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 random_play = "True";

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 playNextMusic() {
   old_p_idx = play_this;
   if (random_play == "True") {
      do{
         play_this=Math.floor(Math.random() * objMmInfo.length);
      }while(play_this == old_p_idx && objMmInfo.length != 1);
   } else {
      if (objMmInfo.length != 1) {
         play_this = play_this + 1;
         if (play_this == objMmInfo.length) play_this = 0;
      }
   }
   if (startFlag == 1) {
      tt1="<iframe marginwidth='0' marginheight='0'"
      +" src='https://vlog.xuite.net/vlog/guest/external.php?media_id="
      + objMmInfo[play_this].mmUrl+"=&pt=2&ar=1&as="+startFlag+"' frameborder='0'"
      +" width='185' scrolling='no' height='65'>"+"</iframe>";
      document.getElementById('myOwnMusic').innerHTML = tt1;
      setTimeout("playNextMusic()", objMmInfo[play_this].mmDur);
   } else {
      tt1="<font size=3>聽音樂請按播放鈕</font>" 
      + "<img src='//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/11501722/6.gif' "
      + "width=26 height=27 border=0 onClick='playNextMusic()' style='margin-bottom:-9px;cursor:hand;' title='播放'>";
      document.getElementById('myOwnMusic').innerHTML = tt1;
      startFlag = 1;
   }
}
</script>
<script language="javascript">
playNextMusic();
</script>
<div id='myOwnMusic'>
</div>

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

語法中只要修改
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='https://vlog.xuite.net/vlog/guest/external.php?media_id=b2pBaEtlLTI0OTk2Ny5mbHY=&pt=2&ar=0&as=0'></iframe>

以上面這個為例,就是b2pBaEtlLTI0OTk2Ny5mbHY ,就是語法中的media_id=xxxxxx=,兩個等於中間的字串啦!!

至於音樂長度(單位為毫秒),這個例子是音樂長度為9分59秒,所以換算成毫秒是(9x60+59)x1000= (540+59)x1000= 599000。

所以就請你自己將這音樂的media_id找出來,以及其音樂長度算一下就完成了。這個語法範例是放了四首!
mkMusicList("QVZRRzYxLTI0OTQ2Ni5mbHY",599000);
mkMusicList("aHRwTkQzLTI0OTU3Mi5mbHY",413000);
mkMusicList("SWMzcnozLTI0OTgxMS5mbHY",599000);
mkMusicList("b2pBaEtlLTI0OTk2Ny5mbHY",519000);

B. 至於var random_play = "True";這部份指的是音樂要隨機(Random)選音樂還是循序(Sequence)播放,所以要改循序播放時就請改為var random_play = "False";就好

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這一篇說明!看不懂再問啦!

9/4修改,因為反斜線被吃掉,所以再Post一次!並且調整為進入文章後只顯示一個播放鈕,點下播放鈕後就會一直隨機輪播不同的音樂!

2009/1/13修改反斜線問題,發現新版的日誌文章編輯器好像不會吃掉我的反斜線了!



隨機文章


  • 歡迎來到隨意窩Xuite

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

     
  • 瀏覽更多精彩內容

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

     
  • 快速便利分享工具

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

     
  • 更多推薦APP

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