HTML5游戏引擎中音频的播放策略

 [本文属原创，如有转载，请注明出处http://blog.csdn.net/yl02520/article/]

 随着HTML5 API的不断丰富和浏览器对HTML5支持的不断完善，基于HTML5开发的游戏引擎也慢慢流行，Web开发者基于HTML5游戏引擎开发的游戏可以很好的实现跨平台功能，例如游戏开发者基于Android开发一款游戏，马上就能运行在iOS设备上，这大大减少了游戏的开发周期，对开发者来说是最大的实惠。

        在游戏引擎中，音乐的播放是必须的，目前我们见到的游戏中几乎都有背景音乐，那么如何在HTML5游戏引擎中实现音频文件的播放呢？首先我们想到的是HTML5提供的audio元素，现在普遍的做法是在HTML文件中动态插入一个audio元素，再把audio元素的src属性设置成需要播放文件的路径，然后调用play方法即可完成音频的播放。

示例代码如下：

var au = document.createElement('audio');
au.src = “./audio/demo.mp3”; //设置音频文件的路径
au.play(); //开始播放音频文件

        在PC浏览器中，上述方案可以正常工作，但是在移动设备Android和iOS上可能会存在下面两个问题。

1.  移动设备上的audio元素在播放前需要一个触屏消息，也就是说无论在audio元素中设置了autoplay或是明确的调用play方法，都不能立即播放音频文件，必须等待用户触摸屏幕后才能播放。目前Android设备上的Chrome浏览器和原生的Android浏览器都有该限制，iOS也有该限制，目的是为了节省移动设备的资源。

2.  移动设备上的某些浏览器暂时不支持多个音频文件同时播放，这对游戏开发者是不能接受的，因为游戏一般都有背景音乐，另外在游戏的过程中，也同时需要触发其他音乐。目前Android设备上原生的Android浏览器就会有该限制。

         面对上述两个问题，在游戏引擎中依靠简单的插入audio元素来播放音乐的方案，在移动设备上就行不通了，所以一些流行的HTML5游戏引擎就采用了另外一种方案，当浏览器支持WebAudio API时，就采用WebAudio替换audio元素来播放音频文件。比如Cocos2d-html5和Construct2，前者是开源的游戏引擎，在国内比较流行，后者是需要收费的，在国外应用较广。

         如何通过WebAudio来播放音频文件呢？请参看另外一篇博文http://blog.csdn.net/yl02520/article/details/17325005

Android设备上的Chrome浏览器上现在已经支持了WebAudio，通过WebAudio来播放音乐也同样被下面两个问题所困扰。

1. 当需要播放的音频文件很大时，文件加载时间很长，因为WebAudio在播放音频文件前，需要把音频文件全部加载进内存，并全部解码后才能开始播放，这是由于WebAudio的低延时策略引起的。例如一个5MB的mp3文件，在Nexus4上的加载和解码时间大概需要4～5秒。

2.  WebAudio播放音乐是的音量太小。这是因为Chrome正在使用通话模式来播放音乐，这是Chrome在实现上的问题，不过该问题在Chromium上已经解决了，估计在Chrome 34或35之后就能生效了。