網頁

2008年5月13日

製作 Flash 音樂播放器!

這是一個Flash的網頁音樂播放器!
其實不難,只要按照下面的步驟去做,大家都能完成!

1.將這個檔案解壓縮!下載壓縮檔
把這個下載的檔案(.zip) 解壓成一個新的資料夾,例如叫 mp3player
開啟這個資料夾,內有四個檔案:
mp3player.swf、mp3player.fla、mp3player.xml、mp3player.html

PS:如果,看不見 mp3player.xml 或 所有檔案的副檔名(*.xxx)
你可以開啟 "我的電腦" 或 "檔案管理員"
之後上面選 工具->資料夾選項 -> 檢視 -> 進階設定
不用勾選( tick)「隱藏已知檔案類型的副檔名」!
按下確定,就會見到。

2.上載歌曲到網路上空間,(或是到「百度」等音樂平台,找歌曲的檔案連結也可以!)
找到網路空間後(Windows Live Spaces有一個SkyDrive,它提供一個5GB的免費空間,可以去免費申請來放各種不同的檔案),接著就可上載 mp3(注意:這個 flash music player 只支援 .mp3)

3.建立播放清單:
(1)修改 mp3player.xml,它其實是一個播放清單,用〝記事本或Wordpad〞開啟
(方法:在mp3player.xml 檔案按右鍵、選擇〝開啟檔案〞中的〝記事本 或 Wordpad〞)
開啟後你會看見:
<?xml version="1.0" encoding="UTF-8"?>
<player showDisplay="yes" showPlaylist="yes" autoStart="no">
<song path="http://hk.geocities.com/abc/hello.mp3" title="歌神 - HELLO" />
<song path="http://hk.geocities.com/abc/hello.mp3" title="歌神 - HELLO" />
<song path="http://hk.geocities.com/abc/hello.mp3" title="歌神 - HELLO" />
</player>

showDisplay 是設定播放器的上半部~~播放中的歌名及時間,
showPlaylist 是設定播放器的下半部~~播放清單,
showDisplay、showPlaylist 是設定播放器展開或是縮小,
"yes" 是 "展開","no" 是 "縮小",如圖:

autoStart 是設定播放器是否 "自動播放" 和 "隨機播放"
"yes" 是 "自動播放"
"no" 是 "手動播放"
"random" 是 "隨機播放" (注意: 隨機播放是會自動開始播放的)

(2)修改播放清單
<song path="http://www.abc.com/abc.mp3" title="歌神 - HELLO" />
紅色部份是 歌曲路徑
紫色部份是 歌曲名稱
※你可以放多少首歌曲都可以,只要你將上載好的歌曲路徑及歌名打上便可

PS:這個下載的 .xml 是採用 UTF-8格式存檔, 本身原來是採用 ANSI
ANSI 不能顯示中文或日文,
所以這個 xml 須採用 UTF-8 儲存(記事本:存檔時,檔案的副檔名仍然是.xml,編碼選UTF-8。wordpad:存檔時,副檔名一樣是.xml,存檔類型選擇Unicode文字文件,如此上傳後才可以看見中文歌曲名)

4.上傳 mp3player資料夾:
到一些如Google Page Creator、hk.geocities.com 或 tw.home.yahoo.com 或 geocities.co.jp 網站,
如果有Google、 yahoo賬號,香港或台灣的均不用申請
例子:
在hk.geocities.com 申請後,用 yahoo 賬號 login 登入
在"檔案總管"上載整個"mp3player"的資料夾,
在 "檔案總管" 內會出現"mp3player"的資料夾,
你再 click 入去,會看見資料夾內四個檔案:
mp3player.swf、mp3player.fla、mp3player.xml、mp3player.html

5. 如何放進自己的Blog 內(各家的Blog,都不一樣,基本上要將語法貼到自由欄位,就是有支援html、JavaScrip的框架內)
修改並複製下列語法,紅色、藍色的字要修改
紅色 是 你上載 mp3player.swf 的位置
藍色 是 你上載 mp3player.xml 的位置







上面的語法因版面支援的問題刪掉了,請按下這個連結去看看!

Photo 寫真

Photo 寫真
A380 airplanes