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