tag:blogger.com,1999:blog-5918579739413557982.post-41241235809504911992009-07-05T17:34:00.001+08:002009-07-05T17:36:17.034+08:00顛覆網路 35 天: HTML 5 版音樂播放器<p>很久沒翻譯這系列文章，我發現<a href="http://www.mijia.org/blog/?cat=166">米嘉</a>也富奸化了… 不過他畢竟是比我維持得更久點，翻譯這類文章真的很考驗毅力的啊，大家要多給義務幫忙翻譯引介資訊的人一點鼓勵。</p><p><a href="http://hacks.mozilla.org/2009/06/audio-player-html5/">這篇文章</a>裡討論的是利用 <a href="https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox">HTML 5 的 audio 標籤</a>與 JavaScript 合作製作一個音樂播放工具，其實 WM 在之前也<a href="http://moztw.org/demo/audioplayer/">為 MozTW 製作了一個更炫的</a>、所以害我每次看到這篇都沒什麼毅力翻譯… (藉口藉口！) 反正，先看看完成圖吧！</p><div align="center" style="font-size: 120%;">
<a href="http://hyper-metrix.com/misc/jai/" target="_blank"><br/>
在 Firefox 3.5 中開啟範例網頁<br/>
<img width="451" height="309" class="aligncenter size-full wp-image-559" title="jai" alt="jai" src="http://hacks.mozilla.org/wp-content/uploads/2009/06/jai.jpg"/><br/>
</a>
</div>
<p>這個範例還是很有價值的，相較於 WM 的炫爆範例，本例的作者採用了有趣的方式來實作：</p><div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><code><span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"jai"</span>></span>
<span style="color: #009900;"><canvas <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"jai-transport"</span> <span style="color: #000066;">width</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"320"</span> <span style="color: #000066;">height</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"20"</span>><<span style="color: #66cc66;">/</span>canvas></span>
<span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">ul</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"playlist"</span>></span>
<span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">li</span>></span>
<span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"@F1LT3R - Cryogenic Unrest.ogg"</span>></span>
F1LT3R - Cryogenic Unrest
<span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>></span>
<span style="color: #009900;"><audio <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"@F1LT3R - Cryogenic Unrest.ogg"</span><span style="color: #66cc66;">/</span>></span>.
<span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">li</span>></span>
<span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"@F1LT3R - Ghosts in HyperSpace.ogg"</span>></span>
F1LT3R - Ghosts in HyperSpace
<span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>></span>
<span style="color: #009900;"><audio <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"@F1LT3R - Ghosts in HyperSpace.ogg"</span><span style="color: #66cc66;">/</span>></span>.
<span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>></span>
<span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>></span></code></pre></div></div>
<p>原始範例裡的程式碼有包含 Fallback 功能而且比較複雜一點，這裡把程式碼簡化比較容易說明。你發現了嗎？清單中所有音樂項目都只是由 HTML 的列表加上 CSS 樣式展現的，每個項目都與一般 HTML 頁面的連結一樣，可以加入書籤、複製連結位置等等。JavaScript 程式會找出 ID 為jai 之 DIV 標籤中所有的 AUDIO 標籤，接著又以 SVG 加上 JavaScript canvas 的方式繪製出操作介面</p><p>用這個方法要加入新樂曲相當方便，且要在任何網站上放入這個播放器也十分容易 —— 定義一個 canvas 與列表就可以了。(相應的 JavaScript 當然要嵌入囉)</p>
<p>附帶一提的是，這個網頁上不但有原作者的說明，連所有的音樂也都是他自己寫的… 這也太猛了吧 XD</p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/5918579739413557982-4124123580950491199?l=blog.bobchao.net' alt='' /></div>柏強http://www.blogger.com/profile/06864196982157693291noreply@blogger.com0