HTML5中的聲音播放模塊的加載和實現(xiàn)
2014-04-29 05:13:40王珂
電子世界 2014年17期
【摘要】HTML是目前網(wǎng)絡(luò)上運用最廣泛的語言。HTML的上一個版本誕生于1999年，自那以后，Web世界已經(jīng)經(jīng)歷了巨變。新一代的HTML5正在蓬勃發(fā)展中，然而，大部分的現(xiàn)代瀏覽器已經(jīng)具備了相當?shù)腍TML5支持。HTML5較之前的版本加入的新功能，能夠使開發(fā)和使用網(wǎng)頁更加便捷，兼具跨平臺特性[1]并與瀏覽器很好地結(jié)合。其中聲音模塊的加入就為用戶及開發(fā)者帶來了極大方便。本文主要探討HTML5中聲音播放模塊的加載和實現(xiàn)。
【關(guān)鍵詞】HTML5;瀏覽器;聲音模塊;Audio對象
自2008年第一份草案發(fā)布后，HTML5（超文本標記語言版本5）就在業(yè)內(nèi)引起廣泛的關(guān)注。隨著移動互聯(lián)網(wǎng)的廣泛應(yīng)用和快速發(fā)展，HTML5的前景更加廣闊，已逐漸成為下一代互聯(lián)網(wǎng)的重要組成部分。
一、聲音模塊
Audio 元素為HTML5應(yīng)用提供了原生的多媒體的支持，使用戶可以直接在頁面上無插件地播放聲音、視頻文件。在HTML5的Audio元素出現(xiàn)以前，如果開發(fā)者需要在頁面上播放多媒體文件，需要使用
大部分基于HTML5的應(yīng)用中，聲音效果也是必不可少的，它和動畫效果一起使應(yīng)用的表現(xiàn)力大大提高。HTML5對多媒體的支持恰好可以滿足這一需求。通過使用HTML5的Audio元素及其包含的相應(yīng)的方法就可以控制聲音在HTML頁面中的播放。
表1
屬屬性 值 描述
autoplay autoplay 如果出現(xiàn)該屬性，則音頻在就緒后馬上播放。
controls controls 如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。
loop loop 如果出現(xiàn)該屬性，則每當音頻結(jié)束時重新開始播放。
preload preload 如果出現(xiàn)該屬性，則音頻在頁面加載時進行加載，并預(yù)備播放。如果使用 "autoplay"，則忽略該屬性。
src url 要播放的音頻的 URL。
二、適配多瀏覽器的音頻資源選擇加載方法
目前的瀏覽器大都支持Audio元素，但是不同瀏覽器對具體格式的音頻及相應(yīng)的多媒體數(shù)字信號編碼解碼器的支持存在差異。
表2 不同瀏覽器對三種音頻格式的支持
IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis √ √ √
MP3 √ √ √
Wav √ √ √
為了使本引擎可以適配更多的瀏覽器，需要首先對瀏覽器的音頻格式支持情況進行判斷，并根據(jù)判斷結(jié)果選擇相應(yīng)的音頻資源進行加載。
首先，需要判斷瀏覽器是否支持audio元素。使用document.createElement（）方法創(chuàng)建audio元素，如果瀏覽器支持audio元素，則創(chuàng)建成功，返回audio元素的一個引用，通過它判斷瀏覽器是否支持audio元素。
接下來需要判斷瀏覽器對音頻格式的支持情況，使用audio元素的方法canPlayType（）分別對mp3、wav、acc與ogg（Vorbis）進行判斷，并建立audioFormat Supported對象，將判斷結(jié)果保存至其屬性值。canPlayType（）方法的返回值為“probably”、“maybe”或空字符串。其中，“probably”、“maybe”表示瀏覽器可能支持該格式的音頻文件。
Var audioTest=document.createElement（‘a(chǎn)udio）;
If（audioTest）{
audioFormatSupported={
Mp3： audioTest.canPlayType（‘a(chǎn)udio/mpeg;），
Wav： audioTest.canPlayType（‘a(chǎn)udio/wav;），
Acc： audioTest.canPlayType（‘a(chǎn)udio/aac;），
Ogg： audioTest.canPlayType（‘a(chǎn)udio/ogg;codecs=”vorbis”）
}
}
為了可以支持更多的瀏覽器，為同一聲音制作的不同格式的音頻文件，并放在HTML5應(yīng)用的資源文件夾中。例如：
shoot_mp3： ”sounds/shoot.mp3”，
shoot_wav： ”sounds/shoot.wav”，
shoot_ ogg： ”sounds/shoot.ogg”，
通過audioFormatSupported判斷該格式是否被瀏覽器支持。
If（format==”mp3”
&&（audioFormatSupported.mp3==”probably”
||audioFormatSupported.mp3==”maybe”））
{ ? //加載該mp3音頻文件}
else if（format==”wav”
&&（audioFormatSupported.wav==”probably”
||audioFormatSupported.wav==”maybe”））
{//加載該wav音頻文件}
……
else
{ ?Window.alert（“瀏覽器不支持現(xiàn)有音頻格式！”）;}
圖1 聲音加載總流程
三、聲音加載與疊加播放的實現(xiàn)
聲音的加載方法與圖像類似，首先實例化一個Audio對象，然后為其src屬性指定資源路徑即可。但是只實例化一個Audio對象，疊加播放是無法實現(xiàn)的，因為只有等聲音資源完全播放完成后，才會開始下一次播放。為此，對需要進行疊加播放的聲音資源實例化多個Audio對象，并將它們加入聲音數(shù)組中。在播放時，通過對該聲音的聲音數(shù)組的遍歷，找到數(shù)組中處于暫停或結(jié)束播放的Audio對象進行播放，就可以完成聲音的疊加播放。
首先應(yīng)該確定如何在加載資源時，判斷該資源是否需要重復(fù)播放。可以在資源列表中，為聲音資源對應(yīng)的名稱添加后綴”_overlap”來判斷該聲音資源是否重復(fù)播放：
var GameStatSrc={ ? ? ? ? ? ……
shoot_mp3_overlap： “sounds/shoot.mp3”，
shoot_wav_overlap： “sounds/shoot.wav”，
shoot_ogg_overlap： “sounds/shoot.ogg”，
……
}
由于在對需要重復(fù)播放的聲音資源進行加載時，使用同一個數(shù)組保存需要重復(fù)播放的聲音，因此該數(shù)組可能保存有多個不同的聲音資源，因此需要確定如何標記此次加載的聲音資源。可以使用模擬的二維數(shù)組來實現(xiàn)，數(shù)組中首先保存需要疊加播放的聲音資源的名稱srcName，然后保存其對應(yīng)的個Audio對象。
首先，初始化Array類型的對象soundArr：
var soundArr[];
如果名為srcName的聲音需要疊加播放，將聲音資源的名稱作為其屬性，并在soundArr[]的基礎(chǔ)上新建數(shù)組：
soundArr[srcName]=[];
下面通過循環(huán)創(chuàng)建多個srcName對應(yīng)的Audio對象，并添加至soundArr[srcName]。
if（bOverlap）
for（var k=0;k this.sources[srcPath]=new Audio（）; this.sources[srcPath].src=srcPath; this.soundArr[srcName][k]=this.sources[srcPath];} 其中，OVER_LAP-TIMES為預(yù)計的疊加播放的次數(shù)，根據(jù)需要定義。 最后，同樣為sources[srcPath]（Audio對象的實例）綁定事件處理函數(shù)： handleEvent.addHandler（this.sources[srcPath]，”canplay”，CheckProgress（this））; 在sources[srcPath]加載完成后，該Audio對象的canplay事件會被觸發(fā)，使用自定義的handleEvent中的addHandler（）方法對canplay事件進行監(jiān)聽，并綁定事件處理函數(shù)CheckProgress（），計算總體資源（聲音、圖像）的加載進度。聲音加載的總流程如上圖所示。 在需要進行疊加播放聲音的地方，創(chuàng)建對象audioToPlay用于保存當前可以進行播放的Audio對象，并對soundArr中的需要播放的聲音資源名稱所包含的所有Audio對象進行遍歷，找到處于暫停paused或結(jié)束ended狀態(tài)的Audio對象，停止遍歷，并對其進行播放。由于每次都從長度為OVER_LAP_TIMES的Audio對象數(shù)組中取出可以進行播放（不為暫停、結(jié)束狀態(tài)）的聲音進行播放，因此不會出現(xiàn)聲音在未停止前無法播放的情況，從而實現(xiàn)了聲音的疊加播放。 例如：對shoot_mp3_overlap資源的疊加播放，實現(xiàn)如下： for（var i=0;i { var audioToPlay; if（soundArr[“sound_overlap”][i].paused || soundArr[“sound_overlap”][i].ended） audioToPlay=soundArr[“shoot_mp3_overlap”][i]; } audioToPlay.play（）; 四、結(jié)論 HTML5還是一種正在發(fā)展和完善的技術(shù)。本文根據(jù)各個瀏覽器對HTML5的支持程度，提供了HTML5適配各瀏覽器的加載方法。同時，通過數(shù)組和循環(huán)的引入，可以做到HTML5中聲音的疊加播放。由于HTML5在音頻方面的新特性，使得Flash播放器和第三方媒體播放器失去了存在的意義。我們可以看出，HTML5和標簽使音頻更容易播放，瀏覽器也更加地穩(wěn)定，其普及前景非常好。 參考文獻 [1]趙澤欣.擁抱HTML 5[J].程序員，2009，08：115-117. [2]W3Schoo1.HTML5教程[OL].http：//www.w3school.com.cn/html5/html_5_audio.asp. [3]顧春蓮.HTML5中的音頻及視頻元素對互聯(lián)網(wǎng)的影響[J].河北省科學(xué)院學(xué)報，2011，28（3）：106-108. [4]W3Schoo1.HTML5教程[OL].http：//www.w3school.com.cn/html5/html_5_audio.asp. 作者簡介：王珂（1993—），女，現(xiàn)就讀于中國傳媒大學(xué)數(shù)字媒體專業(yè)。
