前一篇在寫的時候,當時上傳的聲音播放器尚未推出縮小版,今天看到已經有幾位Xuiters留言回應說已經上線了,所以今天就接上一篇的文章繼續往下教學,可以先參考上一篇:http://blog.xuite.net/jeanson61/xuite/13031594,然後我來繼續講怎麼在自由欄位裡面貼上背景音樂。

有兩種方式可以讓我們找到上傳音樂的播放器網址;
1.利用文章編輯器切換HTML原始碼的按鈕↓(當你利用日誌寫文章上傳影音檔時,可以切換成HTML模式去看播放器網址)

看到像這樣的↓

就是最前面那段<iframe margin .....></iframe>,因為這張圖片是舊的,所以那段程式碼跟現在新版本的語法有點不同,不過都是以<iframe 起頭那段就是了!

2.利用上傳至Xuite影音Vlog後,看到影音平台右方的Embed內嵌碼↓

按Copy,然後就有可以貼的語法,將它貼到你要的地方(自由欄位中,稍後會說明),語法如下↓
<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>

===========================================================
補充說明這語法中的一些參數意義↓
<iframe marginwidth="0" marginheight="0" src="http://vlog.xuite.net/vlog/guest/external.php?media_id=XXXXXXXX=&
pt="2"&ar="0"&as="0" frameborder="0" width="185" scrolling="no" height="65">

其中,
備註:參考日誌大人教學的一些參數,可以設定是否重覆播放及自動播放:
pt ( player type ) = 0 為預設的播放器,2 為新版的Audio 播放器(縮小版),舊版播放器 寬×高 為 420×380(pixel)
ar ( auto repeat ) = 0 為預設播放方式,1 為自動重覆播放(反覆播放同一首)
as ( auto start ) : 0 為不自動播放,1 為自動播放(播放器顯示出來後自動開始播放音樂)
===========================================================

於是將上面這段紅色的字(語法)貼進自由欄位中,就是下圖第4那個框框內(自由欄位的操作就不詳細介紹了)↓

然後如果你這個自由欄位還沒有拉出版面(將自訂欄位顯示出來),就要去版面編排去拉出來,像下面這樣↓(圖片是拿以前舊文章的圖,理論上是將右側你剛才新增的自由欄位名稱那個抓出來,這次應該是抓"自訂的背景音樂"才對)

以上介紹的是單一首歌曲的背景音樂的作法!!

 


 

現在接下來要教另外一種,就是多首歌曲當作背景音樂庫,然後隨機抓出一首歌來當背景音樂反覆播放(選定後就只會播那一首)。在設定多首已上傳至Xuite影音Vlog平台的音樂當做背景音樂庫後,因為Xuite影音鑲嵌的語法是以一個iFrame來鑲嵌,我也無法判斷音樂是否已經播放完畢,然後再播出其他音樂,所以目前我想的只是設定多首音樂庫,然後每次開網頁的時候,隨機的取出一首當做為背景音樂,於是用簡單的Java語法來做(9/11更正,已經另外寫出依據音樂曲目時間播放,會切換到別首歌曲的語法教學:http://blog.xuite.net/jeanson61/xuite/13296710)或是其他版本http://blog.xuite.net/jeanson61/xuite/13624822的教學
========================================================
<script language="javascript">
play_list=new Array();
play_list.push("QVZRRzYxLTI0OTQ2Ni5mbHY");
play_list.push("aHRwTkQzLTI0OTU3Mi5mbHY");
play_list.push("SWMzcnozLTI0OTgxMS5mbHY");
play_list.push("b2pBaEtlLTI0OTk2Ny5mbHY");
var play_this = Math.floor(Math.random()*(play_list.length));
var tt1="<iframe marginwidth='0' marginheight='0'"
+" src='http://vlog.xuite.net/vlog/guest/external.php?media_id="
+ play_list[play_this]+"=&pt=2&ar=1&as=1' frameborder='0'"
+" width='185' scrolling='no' height='65'>"+"</iframe>";
document.write(tt1);
</script>
=========================================================

語法中要改的是紅色字與藍色字↓
1.紅色字的部份:
就是看你有幾首歌曲要列為音樂庫,就設定幾個,這個例子是有四首,紅色字就是在你找到的Xuite影音Vlog的內嵌語法中的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=


以上面這個為例,media_id就是b2pBaEtlLTI0OTk2Ny5mbHY ,就是語法中的media_id=xxxxxx=,兩個等於中間的字串啦!!然後你有幾首音樂,就有幾行的↓
play_list.push("QVZRRzYxLTI0OTQ2Ni5mbHY");
play_list.push("aHRwTkQzLTI0OTU3Mi5mbHY");
play_list.push("SWMzcnozLTI0OTgxMS5mbHY");
play_list.push("b2pBaEtlLTI0OTk2Ny5mbHY");
......

2.藍色字的部份(就是這段:ar=1&as=1):
這部份就是原本日誌大人教學中提到的↓
ar ( auto repeat ) =0 為預設播放方式,1 為自動重覆播放
as ( auto start ) = 0 為不自動播放,1 為自動播放
我的範例是自動播放,而且一直反複播放!!所以是ar=1&as=1
如果你不想要反覆播放就改為
ar=0&as=1
如果你不想要自動播放就改為
ar=1&as=0

七夕情人節要到了,上傳薛偉/小提琴,湯沐海/指揮柏林廣播交響樂團
梁祝專輯!

四首裡面第一首是梁祝(音樂不完整,因為該首為24分鐘多,但是Xuite影音會將它Cut斷,變成9分59秒!殘念)。其他就不是了!



隨機文章


  • 歡迎來到隨意窩Xuite

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

     
  • 瀏覽更多精彩內容

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

     
  • 快速便利分享工具

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

     
  • 更多推薦APP

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