2014年12月23日

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

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>


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

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



更多網頁技巧相關文章:

13 則留言:

  1. 好有過節的氣氛哦!這也讓我想起以前無名時期很多人很愛在自己的部落格裡放音樂!感謝分享!

    回覆刪除
    回覆
    1. 如果 mark 也做出例如端午、中秋等套件,就可以照三節放了~~XD

      刪除
    2. 中秋做過網站載入夜景,端午做過用滑鼠戳粽子消滅戰才能看文章的玩意,不過當時來不及分享就只有自己留著玩。原始檔在重灌電腦時沒了 XD

      刪除
    3. 還有過年哦!^^別忘了還有這個節日!加入鞭炮XD

      刪除
    4. 不過從Wayne這篇文章的標題末「___部落格應景外掛」看來,應該真的會有其他節慶的相關功能哦?!

      刪除
    5. @ mark, 真可惜~~不然就可以換換花樣了 XD

      @ ken, 這要看 mark 了 ^^

      刪除
    6. 嗯﹍還沒有計畫要做什麼?新年的小玩意去年就做過了。

      刪除
    7. 發現Wayne的文字提示不一樣耶!這是Mark所說的馬卡龍嗎??

      刪除
    8. @mark, 對耶~記得有做過! 剛翻了一下 mark 的新年作品,好像都是打包好的,如果像聖誕節布置的模式,各部分可以拆開安裝的話,彈性就比較大了 ^^

      @ken, 好眼力~mark 文章都有 follow 到 !

      刪除
  2. 又是時候拿出這個點唱機了 XD

    (不經不覺,原來這麼快就過了一年了)

    回覆刪除
    回覆
    1. 是啊~不過雖然樣貌沒變,內在變化不少 ^^

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。