基于HTML5的音頻技術(shù)

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

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

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

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

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

下表是截止到2011年7月，各款主流瀏覽器對(duì)音頻格式的支持情況?？梢?，具備OGG+MP3兩種格式的音頻，就能兼容所有現(xiàn)代瀏覽器。
 

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

我們知道了瀏覽器支持的音頻格式，實(shí)際上還有一點(diǎn)也不能忽略，就是響應(yīng)header的Content-Type。必須為正確的格式設(shè)置正確的Content-Type，瀏覽器的audio標(biāo)簽才能正常加載和播放音頻。

基于HTML5技術(shù)，buzz庫對(duì)音頻這方面提供了很好的封裝，其中最重要的是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

設(shè)置和獲取 setTime, getTime, setPercent, getPercent, getDuration, setSpeed, getSpeed, set, get

時(shí)間范圍 getPlayed, getBuffered, getSeekable

錯(cuò)誤和狀態(tài) 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

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

參考資料：

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