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

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

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

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

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

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

創(chuàng)新互聯(lián)公司2013年至今，先為林周等服務建站，林周等地企業(yè)，進行企業(yè)商務咨詢服務。為林周企業(yè)網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

* 注意：為了節(jié)省帶寬，移動設備并不會自動加載和播放音頻，需要用戶交互操作。iPhone 和 iPad 僅能同時播放一首音樂，并且不允許動態(tài)改變音量。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

錯誤和狀態(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

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

 

文章題目：基于HTML5的音頻技術
文章分享：http://aaarwkj.com/article4/pcsooe.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供關鍵詞優(yōu)化、域名注冊、品牌網站制作、建站公司、做網站、搜索引擎優(yōu)化

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)