2009年1月11日 星期日

音樂播放器 之 程式碼產生器

(P.S. 某天發現這篇內臟突然壞去了(冏)⋯⋯就暫把屍體留著當做紀念吧。)



以下是音樂播放器 JW Player 的內嵌程式碼產生器,該程式碼可貼於單篇網誌文章內或側欄(新增 HTML/JavaScript)裡。我學寫產生器是為了遊戲,只有最主要的數個參數被顧及。想了解更多參數請往官網動移。

1. 首先到這裡下載音樂播放器(SWF 檔)上傳到自己的空間。

2. 填寫下表,按下「刷新」,若最底方預覽區出現的播放器正常工作,便能將框內產生的程式碼複製貼入 Blogger 網誌文章內,即大功告成。


壹、Player 程式碼產生器
a. 除了頭兩項*必填之外,其餘可隨意留白而取預設值。
b. 歌單項目可以先略過,容後再稟。

*播放器位址:
*檔案位址:

註:檔案形式可為 FLV、MP4、MP3、AAC、JPG、PNG、GIF,

或 XML 歌單。

圖片位址:
Skin 位址:

例:輕小型歌單造型 Skin SWF 下載

自動播放:
循環播放:
播放器高度:px
播放器寬度:px
播放器底色:#  展開查詢色碼表
播放器鍵色:#
播放器反光色:#
歌單位置:
歌單大小:px
歌單亂數播放:


程式碼:

預覽區:




貳、歌單

要在網誌上嵌入歌單如本文一開頭所示,第一步需先製作歌單 XML 檔(壓縮檔下載),範例如下(XSPF 模式):

<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
  <trackList>

    <track>
      <title>十面埋伏</title>
      <creator>琵琶</creator>
      <location>http://zz.com/10.mp3</location>
      <image>http://zz.com/10.jpg</image>
      <annotation>播放器右方有連結圖示可點選</annotation>
      <info>http://www.imdb.com/title/tt0385004/</info>
    </track>

    <track>
      <title>木棉道</title>
      <creator>馬兆駿</creator>
      <location>http://zz.com/moomein.mp3</location>
      <image>http://zz.com/moomein.png</image>
    </track>

    <track>
      <title>犬夜叉Every Heart鋼琴演奏</title>
      <creator>MK</creator>
      <location>http://zz.com/Inuyasha.mp3</location>
      <image>http://zz.com/Inuyasha.jpg</image>
    </track>

  </trackList>
</playlist>

(語碼框內的檔案網址為假。)

《製作歌單 XML 檔》

上面 XML 檔只列了三首歌,想放多一點歌曲可以模仿每首歌的語法增加 <track>;各首歌的 <image>、<annotation>、<info>……等內容可有可無(更多歌單參數請見這裡)。歌單製作必須注意兩點:

1. 歌單 XML 檔的文字、空白形式或編碼若不適當,播放器就無法讀取它了。較保險的方式是下載上面提供的歌單壓縮檔,解壓縮後用「純文字」編輯器(如微軟的「記事本」)修改並直接存取(不要隨便選擇「存取成……」。若想更改檔案名,關掉編輯器後再直接滑鼠點選改名)。

2. 存放歌單 XML 檔的空間網域必須與播放器 SWF 檔完全相同。


《在網誌上嵌入歌單播放器》

將歌單 XML 檔上傳到自己的空間。在 Player 程式碼產生器中的「檔案位址」一項裡填入歌單位址,其餘選項自由設定(若顯示歌單,播放器高度要調大些),即可產生程式碼。

本產生器若運作失常請告知。因為我不太清楚自己到底在寫些什麼東西……(抱頭)

4 則留言:

  1. 這對我而言頗有用 ^^ 感謝感謝

    回覆刪除
  2. 看到最後那條槓掉的話我笑了XDDDD

    回覆刪除
  3. 謝謝 可不可以請問一下
    色碼表裡為什麼有兩個方格 裡面的顏色有點不一樣啊?
    謝謝

    回覆刪除
  4. 小方格裡的是 web-safe color(適合老舊顯示器),點一下就可以把顏色切換過去。

    回覆刪除