关于html5音频如何应用及解决方法?

HTML5 audio from codecanyon.ne

table

　 　上表总结了网页浏览器当前的市场份额。Internet Explorer依然是主要的桌面浏览器，紧随其后的是Chrome和Firefox。在手机领域中，Safari主导市场，这主要归功于强大的iOS品牌，紧随其后的是Android。因此，我们将照此顺序逐一进行论述。

　　给刚着手植入音频内容的开发者的建议：建议在音频层上采用 SoundManager 2。目前，这是最佳Javascript音频库。植入过程非常简单，API非常整洁，能够在BSD Open Source许可下获得。此外，这一工具的过人之处在于，提供免费第三方代码更新和维护。

　　Internet Explorer

　　IE 8及其以下的版本不支持HTML5画布和音频，所以这又回到：图像部分基于DOM操作，音频部分通过Flash技术。采用SoundManager 2能够让你在于旧版IE浏览器中支持HTML5音频的过程中省下很多麻烦。

　　IE 9则完全不同。HTML5画布和音频表现突出。若微软放弃Win XP OS，IE 9的使用率将大幅提高。

　　这将是微软的明智之举。

　　Chrome

　　Chrome 18及更高版本支持HTML5音频和画布。但HTML5音频只有在网页服务器支持部分下载的情况下才能够顺利运作。这一问题的症状有：

　　*无法重播音频

　　*无法控制重播位置

　　*音频播放一次后停止，但“结束”事件没被激活

　　解决这一问题最简单的方式是，在网页服务器上启动远程请求。注意，Google App Engine并不支持远程请求，但我们可以通过执行支持远程请求的文件服务程式解决这一问题。

　　另一避开这一问题的方法是，避免采用内置循环函数，通过load()函数“倒回”，在此播放音频。这能够解决问题，但会提高网页服务器的负荷。当加载函数在音频实例中被调用时，网页浏览器就从网页服务器上提取音频数据。

　　另一选择就是运用Web Audio API。主要缺点是，目前只有Chrome支持Web Audio API，而且只支持版本18或更高版本。它的突出优点是，Web Audio API通过提供音量和摇摄控制及即时过滤，解决HTML5音频的所有缺点。

　　Safari

　　Safari和Chrome都是基于Webkit的浏览器，二者存在类似的优缺点。和Chrome一样，Safari支持HTML5画布和音频，但Safari不支持Google Web Audio API。

　　遗憾的是，Safari也有和Safari类似的缺陷——它和不支持部分下载的网页服务器所提供的音频不同。Safari的症状截然不同：

　　*少量/简短音频没有问题

　　*冗长音频就无法播放，会发送音频文件格式受损的错误提示

　　解决这一问题最简单的方式是，启用网页服务器的部分下载功能。补救方法具体查看Chrome版块。

　　Firefox

　 　Firefox 3.6及更高版本支持HTML5画布和音频。但Firefox 3.6的音频支持存在许多漏洞——简短音频无法播放，中长音频没有问题。如果你寻求更高级的音频支持，Mozilla基金会目前正在执行自己的Web Audio API——Audio Data API。

　　iOS移动平台(Safari移动平台)

　　Safari Mobile包含桌面浏览器的所有优缺点，此外它还有一个限制条件—–所有HTML5音频必须通过用户互动激活。这一限制条件带来两个主要弊端。

　　首先，这一限制条件阻止音频进行预先缓存/预先加载。因此，任何等待音频“canplaythrough”事件，以探测预先加载音频的应用就会陷入挂起状态。其次，激活音频回放事件非常棘手，因为苹果极力抵制非用户激活的音频回放——这一限制条件一度有个变通方案：通过Javascript模拟点击事件，但这一方法自iOS 4.2.x起就不再适用。

　　最后，Flash音频回放技巧不适用iOS平台是因为iOS不支持Flash技术。

　　iOS只有两个选项——禁止所有音频，继续通过网页浏览器提供应用；或者保留所有音频，通过appMobi、PhoneGap或Appcelerator以原生应用形式发行HTML5应用。关于游戏开发，我建议采用appMobi，因为它有画布加速器功能。

　　Android(内置浏览器)

　 　只要你的OS平台不那么分散。存在许多Android版本使得HTML5音频支持很难有最终定论。关于目前Android OS存在多少变体，不妨查看YUI Theatre的视频“Scaling Mobile with YUI”。在22分处，解说者呈现一个包含目前市场上Android OS版本不完全列表的幻灯片。

　　这些是平台的常见音频特点：

　　* Android 2.x似乎支持HTML5音频，但它无法播放音频。幸运的是，应用继续顺利运作——所有音频函数调用返回适当结果，加载/缓存事件被合理激活。

　　* ICS (Android 4.x)支持HTML5音频，它能够播放音频。但回放只限于一次一个声音，最近播放的音频会代替所有之前的音频回放。

　　我没有测试Android 3.x的HTML5音频性能。

　　幸运的是，Android支持Flash整合，所以回放Flash音频具有可行性。尽管如此，Flash是个可选谷歌应用，因此并非所有Android 手机都安装了这一应用。遗憾的是，关于手机Flash市场的渗透情况，我没有任何数据。无论如何，这一方法并不推荐，因为Adobe已放弃支持手机 Flash技术，所以在不久的将来，这多半会消失。

　　确保提供适当音频支持的最佳方式就是走本地路线，通过appMobi、 PhoneGap或Appcelerator发布HTML5应用。关于游戏开发，我推荐appMobi，因为它计划在Android平台添加加速画布支持 (游戏邦注：这一功能目前处在Beta阶段)。

　　总结

　　通往HTML5音频之路布满荆棘。我建议采用 SoundManager 2，这能够帮你省下很多麻烦。关于手机平台，情况就不那么明朗。不妨考虑走本地路线，通过asappMobi、PhoneGap或 Appcelerator之类的HTML5原生应用平台以原生应用形式发行HTML5应用。关于游戏开发，目前的最佳HTML5原生应用平台是 appMobi。