[本文属原创,如有转载,请注明出处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之后就能生效了。