HTML5中的声音播放模块的加载和实现
2014-04-29王珂
【摘要】HTML是目前网络上运用最广泛的语言。HTML的上一个版本诞生于1999年，自那以后，Web世界已经经历了巨变。新一代的HTML5正在蓬勃发展中，然而，大部分的现代浏览器已经具备了相当的HTML5支持。HTML5较之前的版本加入的新功能，能够使开发和使用网页更加便捷，兼具跨平台特性[1]并与浏览器很好地结合。其中声音模块的加入就为用户及开发者带来了极大方便。本文主要探讨HTML5中声音播放模块的加载和实现。
【关键词】HTML5;浏览器;声音模块;Audio对象
自2008年第一份草案发布后，HTML5（超文本标记语言版本5）就在业内引起广泛的关注。随着移动互联网的广泛应用和快速发展，HTML5的前景更加广阔，已逐渐成为下一代互联网的重要组成部分。
一、声音模块
Audio 元素为HTML5应用提供了原生的多媒体的支持，使用户可以直接在页面上无插件地播放声音、视频文件。在HTML5的Audio元素出现以前，如果开发者需要在页面上播放多媒体文件，需要使用
大部分基于HTML5的应用中，声音效果也是必不可少的，它和动画效果一起使应用的表现力大大提高。HTML5对多媒体的支持恰好可以满足这一需求。通过使用HTML5的Audio元素及其包含的相应的方法就可以控制声音在HTML页面中的播放。
表1
属属性 值 描述
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src url 要播放的音频的 URL。
二、适配多浏览器的音频资源选择加载方法
目前的浏览器大都支持Audio元素，但是不同浏览器对具体格式的音频及相应的多媒体数字信号编码解码器的支持存在差异。
表2 不同浏览器对三种音频格式的支持
IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis √ √ √
MP3 √ √ √
Wav √ √ √
为了使本引擎可以适配更多的浏览器，需要首先对浏览器的音频格式支持情况进行判断，并根据判断结果选择相应的音频资源进行加载。
首先，需要判断浏览器是否支持audio元素。使用document.createElement（）方法创建audio元素，如果浏览器支持audio元素，则创建成功，返回audio元素的一个引用，通过它判断浏览器是否支持audio元素。
接下来需要判断浏览器对音频格式的支持情况，使用audio元素的方法canPlayType（）分别对mp3、wav、acc与ogg（Vorbis）进行判断，并建立audioFormat Supported对象，将判断结果保存至其属性值。canPlayType（）方法的返回值为“probably”、“maybe”或空字符串。其中，“probably”、“maybe”表示浏览器可能支持该格式的音频文件。
Var audioTest=document.createElement（‘audio）;
If（audioTest）{
audioFormatSupported={
Mp3： audioTest.canPlayType（‘audio/mpeg;），
Wav： audioTest.canPlayType（‘audio/wav;），
Acc： audioTest.canPlayType（‘audio/aac;），
Ogg： audioTest.canPlayType（‘audio/ogg;codecs=”vorbis”）
}
}
为了可以支持更多的浏览器，为同一声音制作的不同格式的音频文件，并放在HTML5应用的资源文件夹中。例如：
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（“浏览器不支持现有音频格式！”）;}
图1 声音加载总流程
三、声音加载与叠加播放的实现
声音的加载方法与图像类似，首先实例化一个Audio对象，然后为其src属性指定资源路径即可。但是只实例化一个Audio对象，叠加播放是无法实现的，因为只有等声音资源完全播放完成后，才会开始下一次播放。为此，对需要进行叠加播放的声音资源实例化多个Audio对象，并将它们加入声音数组中。在播放时，通过对该声音的声音数组的遍历，找到数组中处于暂停或结束播放的Audio对象进行播放，就可以完成声音的叠加播放。
首先应该确定如何在加载资源时，判断该资源是否需要重复播放。可以在资源列表中，为声音资源对应的名称添加后缀”_overlap”来判断该声音资源是否重复播放：
var GameStatSrc={ ……
shoot_mp3_overlap： “sounds/shoot.mp3”，
shoot_wav_overlap： “sounds/shoot.wav”，
shoot_ogg_overlap： “sounds/shoot.ogg”，
……
}
由于在对需要重复播放的声音资源进行加载时，使用同一个数组保存需要重复播放的声音，因此该数组可能保存有多个不同的声音资源，因此需要确定如何标记此次加载的声音资源。可以使用模拟的二维数组来实现，数组中首先保存需要叠加播放的声音资源的名称srcName，然后保存其对应的个Audio对象。
首先，初始化Array类型的对象soundArr：
var soundArr[];
如果名为srcName的声音需要叠加播放，将声音资源的名称作为其属性，并在soundArr[]的基础上新建数组：
soundArr[srcName]=[];
下面通过循环创建多个srcName对应的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为预计的叠加播放的次数，根据需要定义。 最后，同样为sources[srcPath]（Audio对象的实例）绑定事件处理函数： handleEvent.addHandler（this.sources[srcPath]，”canplay”，CheckProgress（this））; 在sources[srcPath]加载完成后，该Audio对象的canplay事件会被触发，使用自定义的handleEvent中的addHandler（）方法对canplay事件进行监听，并绑定事件处理函数CheckProgress（），计算总体资源（声音、图像）的加载进度。声音加载的总流程如上图所示。 在需要进行叠加播放声音的地方，创建对象audioToPlay用于保存当前可以进行播放的Audio对象，并对soundArr中的需要播放的声音资源名称所包含的所有Audio对象进行遍历，找到处于暂停paused或结束ended状态的Audio对象，停止遍历，并对其进行播放。由于每次都从长度为OVER_LAP_TIMES的Audio对象数组中取出可以进行播放（不为暂停、结束状态）的声音进行播放，因此不会出现声音在未停止前无法播放的情况，从而实现了声音的叠加播放。 例如：对shoot_mp3_overlap资源的叠加播放，实现如下： 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（）; 四、结论 HTML5还是一种正在发展和完善的技术。本文根据各个浏览器对HTML5的支持程度，提供了HTML5适配各浏览器的加载方法。同时，通过数组和循环的引入，可以做到HTML5中声音的叠加播放。由于HTML5在音频方面的新特性，使得Flash播放器和第三方媒体播放器失去了存在的意义。我们可以看出，HTML5和标签使音频更容易播放，浏览器也更加地稳定，其普及前景非常好。 参考文献 [1]赵泽欣.拥抱HTML 5[J].程序员，2009，08：115-117. [2]W3Schoo1.HTML5教程[OL].http：//www.w3school.com.cn/html5/html_5_audio.asp. [3]顾春莲.HTML5中的音频及视频元素对互联网的影响[J].河北省科学院学报，2011，28（3）：106-108. [4]W3Schoo1.HTML5教程[OL].http：//www.w3school.com.cn/html5/html_5_audio.asp. 作者简介：王珂（1993—），女，现就读于中国传媒大学数字媒体专业。
