Bye-Bye 無名,自己架部落格:直接架在 Google 上,GAE、相簿免空部落格自架教學

自製線上音樂播放器

BOX:MP3 Quality Modifier軟體小檔案

BOX:Copy Links擴充套件小檔案

1.筆者將使用sa3upload儲存音樂檔,再把播放器內嵌於Django文章裡面。由於GAE有10MB限制,建議先用MP3 Quality Modifier壓縮MP3檔案。開啟之後請按下〔Add files〕或〔Add folder〕匯入待壓縮的MP3檔案。

Bye-Bye 無名,自己架部落格:直接架在 Google 上,GAE、相簿免空部落格自架教學

2.維持「Bitrate」(位元速率)、「Modus」(模式)跟「Sample frequency」(採樣頻率)區域的預設值可把一支320kbps的MP3歌曲壓縮至原來的一半大小,基本上符合GAE的10MB限制。「Destination」區域第一個選項右側的〔…〕用於設定壓縮後的檔案儲存路徑,按下〔Process〕按鈕開始處理已勾選的MP3檔。

Bye-Bye 無名,自己架部落格:直接架在 Google 上,GAE、相簿免空部落格自架教學

3.MP3 Quality Modifier的處理過程非常穩定,最後跑出的「Result」對話盒上列有全部檔案的「% Size change」(相對於原始檔案大小)、「Created (MB)」(壓縮後檔案大小)。

Bye-Bye 無名,自己架部落格:直接架在 Google 上,GAE、相簿免空部落格自架教學

4.接下來,請使用Firefox瀏覽器開啟「https://addons.mozilla.org/zh-TW/firefox/addon/copy-links/」網頁,按下〔+新增至Firefox〕安裝Copy Links擴充套件,然後按一下〔立即重新啟動〕重開Firefox。

Bye-Bye 無名,自己架部落格:直接架在 Google 上,GAE、相簿免空部落格自架教學

5.將大小適宜的MP3檔案逐一上傳至sa3upload後,進入管理控制台,按下鍵盤上的〔Ctrl〕並選取已上傳的音樂檔名,再按下滑鼠右鍵選擇【複製】,將其貼至文字編輯器備用。

Bye-Bye 無名,自己架部落格:直接架在 Google 上,GAE、相簿免空部落格自架教學

6.接著,從sa3upload首頁進入你的MP3檔案所在資料夾,先反白選取,再按下右鍵並依序點選【大量複製鏈結網址】→【複製已選擇的鏈結】,將其貼至文字編輯器備用。

Bye-Bye 無名,自己架部落格:直接架在 Google 上,GAE、相簿免空部落格自架教學

7.最後你可以使用播放器語法產生工具為這些MP3檔案建立HTML播放器語法,筆者向您推薦「http://flash-mp3-player.net/players/multi/generator/」,只需把sa3upload的載點貼在「mp3」欄位,URL之間以「|」區隔,便可自製播放器的HTML語法,不過缺點是該工具無法編輯曲目。

Bye-Bye 無名,自己架部落格:直接架在 Google 上,GAE、相簿免空部落格自架教學

8.筆者修改了前面那個工具產生的程式碼,感興趣的讀者朋友可前往「http://tny.cz/730d8bef」,那裡有我編輯的五支歌曲的HTML程式碼,只要使用您剛才貼至文字編輯器的備用內容稍加修改,便可自製播放器語法:

■「mp3 url」表示MP3檔案連結,如:「http://victoryupload.appspot.com/music/5820067233136640-01.%20Bryan%20Adams%20-%20(Everything%20I%20Do)%20I%20Do%20It%20For%20You.mp3」

■「Music 1, 2, 3...12」表示曲目,如:「01. Bryan Adams - (Everything I Do) I Do It For You」

然後全選並按一下【複製】來複製這些程式碼。

Bye-Bye 無名,自己架部落格:直接架在 Google 上,GAE、相簿免空部落格自架教學

9.於Django發表文章時,請點擊TinyMCE工具列上的〔HTML〕按鈕。

Bye-Bye 無名,自己架部落格:直接架在 Google 上,GAE、相簿免空部落格自架教學

10.貼上MP3播放器的HTML程式碼之後,再按一下〔Update〕來發表這篇文章。

Bye-Bye 無名,自己架部落格:直接架在 Google 上,GAE、相簿免空部落格自架教學

11.圖中是筆者自製的MP3播放器,它的色彩及大小皆可透過編輯HTML程式碼客製化。

Bye-Bye 無名,自己架部落格:直接架在 Google 上,GAE、相簿免空部落格自架教學

 

PCuSER
作者

使用 Facebook 留言
Racious
2.  Racious (發表於 2014年1月30日 14:18)
看到這麼多頁數..還要自己按..就不太想看了..
不能都寫在同一頁嗎..╮(╯_╰)╭
請輸入你的暱稱
3.  請輸入你的暱稱 (發表於 2014年1月31日 00:20)
不曉得分頁的目的到底在哪 囧rz..之前早留言問過小編,但到現在還是一樣用的很高興

這樣只會造成讀者的困擾╮(╯_╰)╭
D級佛托
5.  D級佛托 (發表於 2014年2月04日 23:01)
(⊙ˍ⊙)
全部14頁看完,這個GAE讓我想起1X年前自己架站時,怎麼那時的用的工具跟現在沒什麼二樣,而我一直以來美工底子就差,要用這套工具架部落格,看來是麻煩多了。
發表回應
謹慎發言,尊重彼此。按此展開留言規則