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

首先感謝 +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>


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

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

更多網頁技巧相關文章：