2014年12月1日 星期一

聖誕音樂點唱機﹍部落格應景外掛

聖誕音樂點唱機﹍部落格應景外掛

Wayne Fu 0 A+
首先感謝 +Mark X 製作的「聖誕節佈置懶人包」,每年節慶期間都可從倉庫中取出,重新在網站上裝飾一番。這組套件包含了網頁背景、雪花效果、滑鼠游標、以及最重要的主體──音樂點唱盒。

原版本包含了貓咪、小朋友、及水晶聖誕音樂,由於今年想要變換一下音樂,於是徵求了 Mark 的同意。以下提供這個音樂點唱機的修改方法,可自訂音樂清單,不過如作者所提的,請注意 mp3 的版權合法性,尊重音樂著作權。



一、修改音樂盒


1. 版權問題

這個音樂點唱盒使用的格式為 mp3,在網路上搜尋時請注意該網站的使用條款,務必使用沒有爭議的聖誕音樂,注意能否公開播放,以免帶來麻煩。


2. 上傳 mp3 檔、取得外連網址

mp3 檔請先上傳到自己的網路空間,例如 Google Drive 或 Dropbox。Google Drive 的上傳與取得外連路徑,請參考「Google Drive 檔案分流教學」、「Google Drive 外連產生器」。


3. 製作播放清單

請用記事編輯軟體,製作含以下文字的檔案,附檔名為 ".xml",例如 "xmas.xml":

<?xml version="1.0" encoding="utf-8" ?>
<player autoStart="random">
<song url="mp3網址"/>
</player>

  • 綠色字串請置換為自己的 mp3 網址連結
  • 播放清單要使用幾首歌曲,藍色字串這行就請複製幾行,並填入不同的 mp3 連結。
  • 預設的播放方式為 "隨機播放"。
  • 請將此 xml 檔上傳到自己的網路空間,並取得外連網址



二、音樂點唱盒程式碼


以下為整個「聖誕節佈置懶人包」套件之中,抽出來的「音樂點唱盒」程式碼:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-888555020000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=15,0,0,0" width="200" height="200" id="Xmas" align="middle">
<param name="movie" value="http://dl.dropboxusercontent.com/u/34007546/Xmas/Xmas.swf" flashvars="playlist=填入xml檔網址" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<div align="center"><embed src="http://dl.dropboxusercontent.com/u/34007546/Xmas/Xmas.swf" flashvars="playlist=填入xml檔網址" quality=high bgcolor=#ffffff width="200" height="200" wmode="transparent" name="Xmas" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></div>
</object>

以上兩組紅色字串「填入xml檔網址」請改為前面製作好的播放清單 xml 檔網址連結即可。

如果只要在網站擺放這個音樂盒的話,可將以上程式碼放在任何想要顯示的地方。以 Blogger 為例,可在後台新增「HTML/Javascript」小工具,貼上這些程式碼即可。效果類似下面這樣,按下星星就可開始隨機播放音樂:


如果想製作這個計數器風格的字樣「X'mas Jukebox」,可參考「CSS3 漸層語法產生器﹍計數器背景實作」。如果想完全複製 WFU BLOG 的音樂點唱盒,給個提示,可以檢視網頁原始碼。但提醒在先,由於檔案放在 WFU 的空間,哪天刪除、或變更了 mp3 檔,或是任何相關檔案有了變動,導致外連失效,那讀者還是得自行製作一個囉。



三、完整套件程式碼


補充說明一下原始程式碼、及本文的程式碼的相關性,原版安裝程式碼如下:

<link href="https://dl.dropbox.com/u/34007546/Xmas/Xmas.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://dl.dropbox.com/u/34007546/Xmas/Xmas.js"></script>
<script src="https://dl.dropbox.com/u/34007546/Xmas/Snow-fall.js"></script>
<script>jQuery(document).ready(function(){jQuery(document).snowfall()});</script>


以上紅色字串的內容,就是「音樂點唱盒」的程式碼,這部分置換為「二、音樂點唱盒程式碼」,就是本文的效果。

至於其他部分如何取捨、自訂,請參照原文「聖誕節佈置懶人包」的說明,或是這篇「部落格聖誕節裝飾實作」。



更多網頁技巧相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP