2011年4月25日 星期一

JW Flash MP3 Player 音樂播放器 - mp3player.swf


JW (jeroenwijering) Flash MP3 播放器 - 使用 mp3player.swf 2.3 版本


首先

寬度 及 高度 預設值是 240 x 200
播放器不含清單則為 240 x 20
(寬度最好不要小於 75 否則會開始亂掉)

音量 預設值 是 80% (目前筆者在不使用 XML Config 的情況下無法更改音量)


基本語法

<embed width="240" height="20" src="http://.../mp3player.swf" flashvars="file=http://.../*.mp3"></embed>


語法分解成

<embed
 width="240" height="20"
 src="http://.../mp3player.swf"
 flashvars="file=http://.../*.mp3">
</embed>


舊語法分解

<embed
 width="240" height="20"
 src="http://.../mp3player.swf?file=http://.../*.mp3">
</embed>

其中藍紫色文字不要更改,只要取代掉紅色文字就可以了。


範例

以下播放的音樂是由 longtailvideo 網站所下載的 bunny.mp3



請點選 播放按鈕 即可聽見音樂


其次是 XML (Extensible Markup Language) (可延伸標記語言)

config.xml設置檔(XML Config)檔案格式 ANSI
playlist.xml播放清單檔(XML PlayList)檔案格式 UTF-8


關聯 config.xmlplaylist.xml 來控制 mp3player.swf
參數設定方面 config.xml 和 playlist.xml 文件內有注釋說明

※ 記住修改檔案後於儲存時,檔案格式要正確


語法

<embed width="240" height="140" src="http://.../mp3player.swf" flashvars="config=http://.../config.xml&file=http://.../playlist.xml"></embed>


語法分解成

<embed
 width="240" height="140"
 src="http://.../mp3player.swf"
 flashvars="config=http://.../config.xml&file=http://.../playlist.xml">
</embed>


舊語法分解

<embed
 width="240" height="140"
 src="http://.../mp3player.swf?config=http://.../config.xml&file=http://.../playlist.xml">
</embed>


config.xml 設置

<autostart>false</autostart>關閉自動播放
<shuffle>false</shuffle>關閉隨機播放
<repeat>list</repeat>清單順序播放完成自動停止
<volume>60</volume>音量 60%
<showdisplay>true</showdisplay>秀出展示區
<showplaylist>true</showplaylist>秀出清單區
<linktarget>_blank</linktarget>以新頁開啟超連結
<backcolor>0x------</backcolor>背景色彩 ("------" 色碼)
<frontcolor>0x------</frontcolor>前景色彩 ("------" 色碼)
<lightcolor>0x------</lightcolor>高亮度行動色彩 ("------" 色碼)


playlist.xml 檔內的 <track> 標籤設置

<annotation>--</annotation>在 "--" 處輸入曲名
<location>--</location>在 "--" 處輸入 MP3 網址
<info>--</info>在 "--" 處輸入超連結網址
<image>--</image>在 "--" 處輸入展示區圖片網址

※ 注意 "--" 可直接刪除,比如 <info></info> 即代表不用超連結
  超連結位於清單曲目條列右方的小箭頭圈圈


範例

展示區的圖片是由 Dewslider 網頁所下載的 1.jpg , 4.jpg , 6.jpg

以下播放的音樂是由 Dewplayer 網頁所下載的 test1.mp3 , test2.mp3 , test3.mp3



請點選 播放按鈕清單條列 即可聽見音樂


播放器背景圖設置 (.jpg 檔) (使用新語法)

只要在 config.xml 檔案裡修改 (加入) 這一行標籤 <jpgfile>--</jpgfile> 就行了

背景圖片是由 沊沊的隨意地圖 網頁所下載的 toppi.jpg



請點選 播放按鈕清單條列 即可聽見音樂


※ 背景圖縮放控制參數,筆者目前沒有測試出來



主題網站
超連結 → longtailvideo 網站的 JW Player

官方舊版下載頁面 → tags/mp3player-2.3 @ 90
bunny.mp3 下載頁面 → testing/files/bunny.mp3 @ 169

檔案來源
展示區圖片 alsacréations 網站 (法文) 的網頁 Dewslider (含下載點)
播放清單 MP3 alsacréations 網站 (法文) 的英文網頁 Dewplayer (含下載點)
播放器背景圖 沊沊的隨意地圖音樂播放器~v.2.3設定篇

參考來源
XML 語法來源 沊沊的隨意地圖音樂播放器~v.2.3設定篇音樂播放器 ~v.2.3 放送篇

參考來源檔案下載頁面 mp3player 播放器 (含XML)

相同文章存放於
痞客邦 PIXNETfoster 網頁 (尚未製作完成)

沒有留言:

張貼留言