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

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

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

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

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

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

創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計、成都網(wǎng)站制作與策劃設(shè)計,久治網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:久治等地區(qū)。久治做網(wǎng)站價格咨詢:028-86922220

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

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

基于HTML5技術(shù)，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

設(shè)置和獲取 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

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享名稱：基于HTML5的音頻技術(shù)-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://chinadenli.net/article20/dhgcco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、移動網(wǎng)站建設(shè)、云服務(wù)器、網(wǎng)站改版、App設(shè)計、企業(yè)網(wǎng)站制作

廣告

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