顛覆網路 35 天: HTML 5 版音樂播放器

很久沒翻譯這系列文章，我發現米嘉也富奸化了… 不過他畢竟是比我維持得更久點，翻譯這類文章真的很考驗毅力的啊，大家要多給義務幫忙翻譯引介資訊的人一點鼓勵。

這篇文章裡討論的是利用 HTML 5 的 audio 標籤與 JavaScript 合作製作一個音樂播放工具，其實 WM 在之前也為 MozTW 製作了一個更炫的、所以害我每次看到這篇都沒什麼毅力翻譯… (藉口藉口！) 反正，先看看完成圖吧！

在 Firefox 3.5 中開啟範例網頁

這個範例還是很有價值的，相較於 WM 的炫爆範例，本例的作者採用了有趣的方式來實作：

<div id="jai">

  <canvas id="jai-transport" width="320" height="20"></canvas>
  <ul class="playlist">

    <li>
      <a href="@F1LT3R - Cryogenic Unrest.ogg">
        F1LT3R - Cryogenic Unrest
      </a>
      <audio src="@F1LT3R - Cryogenic Unrest.ogg"/>.
    <li>

      <a href="@F1LT3R - Ghosts in HyperSpace.ogg">
        F1LT3R - Ghosts in HyperSpace
      </a>
      <audio src="@F1LT3R - Ghosts in HyperSpace.ogg"/>.       
  </ul>    

</div>

原始範例裡的程式碼有包含 Fallback 功能而且比較複雜一點，這裡把程式碼簡化比較容易說明。你發現了嗎？清單中所有音樂項目都只是由 HTML 的列表加上 CSS 樣式展現的，每個項目都與一般 HTML 頁面的連結一樣，可以加入書籤、複製連結位置等等。JavaScript 程式會找出 ID 為jai 之 DIV 標籤中所有的 AUDIO 標籤，接著又以 SVG 加上 JavaScript canvas 的方式繪製出操作介面

用這個方法要加入新樂曲相當方便，且要在任何網站上放入這個播放器也十分容易 —— 定義一個 canvas 與列表就可以了。(相應的 JavaScript 當然要嵌入囉)

附帶一提的是，這個網頁上不但有原作者的說明，連所有的音樂也都是他自己寫的… 這也太猛了吧 XD