基于HTML5的音頻技術

作者，蘇州思必馳信息科技有限公司，mdifar

傳統情況下，需要在網頁中播放一段音頻，通常有兩種方案：
1. 基于Flash插件的音頻播放器。
2. 基于瀏覽器插件的音頻播放。

使用Flash播放器，一個顯而易見的好處是基本上兼容所有的PC瀏覽器，瀏覽器上只需要安裝Flash插件即可，兼容性問題Adobe公司已經幫我們很好的解決了。而基于瀏覽器音頻插件，不同瀏覽器都需要特別定制，甚至同一個瀏覽器的不同版本也需要不同的實現，這在使用上造成了一定的困難。

隨著移動設備的發展，基于Flash插件的音頻播放器越來越不能滿足需要：從Flash插件的性能、安全等方面問題考慮，蘋果移動設備也都是不支持Flash的。因此，越來越需要一套規范來使開發者能更方便的在網頁中嵌入多媒體技術。

HTML5的產生，為音頻的播放提供了一套標準。在這之前，要想在頁面中播放一段音頻，通常是很麻煩的。比較通用的做法是寫一個flash音頻播放器，并提供一套接口，以便在各個瀏覽器中都兼容；或者直接寫embed標簽，但這就需要相關插件的支持。而現在，我們只需要在HTML頁面中嵌入一段audio標簽，就能在多款主流瀏覽器下播放音頻了。

下表是截止到2011年7月，各款主流瀏覽器對音頻格式的支持情況。可見，具備OGG+MP3兩種格式的音頻，就能兼容所有現代瀏覽器。
 

* 注意：為了節省帶寬，移動設備并不會自動加載和播放音頻，需要用戶交互操作。iPhone 和 iPad 僅能同時播放一首音樂，并且不允許動態改變音量。iPad在處理同一頁面中的多個音樂時存在一些問題。

我們知道了瀏覽器支持的音頻格式，實際上還有一點也不能忽略，就是響應header的Content-Type。必須為正確的格式設置正確的Content-Type，瀏覽器的audio標簽才能正常加載和播放音頻。

基于HTML5技術，buzz庫對音頻這方面提供了很好的封裝，其中最重要的是sound類。

下面列出buzz的sound類方法：load,

播放控制play, pause, togglePlay, isPaused, stop, isEnded, loop, unloop

音量控制 mute, unmute, toggleMute, isMuted, setVolume, getVolume, increaseVolume, decreaseVolume, fadeIn, fadeout, fadeTo, fadeWith

事件綁定 bind, bindOnce, unbind, trigger

設置和獲取 setTime, getTime, setPercent, getPercent, getDuration, setSpeed, getSpeed, set, get

時間范圍 getPlayed, getBuffered, getSeekable

錯誤和狀態 getErrorCode, getErrorMessage, getStateCode, getStateMessage, getNetworkStateCode, getNetworkStateMessage

buzz的事件：abort, canplay, canplaythrough, dataunavailable, durationchange, emptied, empty, ended, error, loadeddata, loadedmetadata, loadstart, pause, play, playing, progress, ratechange, seeked, seeking, suspend, timeupdate, volumechange, waiting

通過這些方法，我們不難看出，其中的接口設計比較冗余，有很多接口的功能實際上是好幾個簡單接口的組合。并且buzz庫只是對HTML5的音頻接口進行了封裝，并沒有提供一套多瀏覽器兼容的解決方案。而jQuery的jPlayer就做得不錯，基于HTML5技術和Flash技術提供了一套通用的音頻和視頻解決方案，值得我們借鑒。如果還能加上rtmp協議的支持，那就可以說是完美了。

參考資料：

l W3C: The audio element
http://dev.w3.org/html5/spec/Overview.html#the-audio-element

l Buzz! A Javascript HTML5 Audio library
http://buzz.jaysalvat.com/

l jPlayer
http://jplayer.org/

來源：蘇州思必馳信息就有限公司，blog.aispeech.com