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之后就能生效了。

HTML5游戏引擎中音频的播放策略相关推荐

HTML5游戏引擎（二）02-egret引擎之hello world——快速上手-清理项目程序入口绘制单色背景调整屏幕的适配模式添加文字响应用户操作-让文字变色
HTML5游戏引擎(二)02-egret引擎之hello world--快速上手-清理项目 & 程序入口 & 绘制单色背景 & 调整屏幕的适配模式 & 添加文字 &am ...
HTML5游戏引擎lufylegend深入浅出 - 引擎介绍原理
又很久没有更新博客了,在这段时间里发生的事还蛮多的,回想起来才发现时间过得好快啊.至于博客嘛,天天都会关注,一来想看看大家是否写了一些评论,二来想看看大神们(如lufy,浅墨,雾央,Himi等)有没有 ...
HTML5游戏引擎（十六）-屏幕适配——showAll模式 noScale模式 noBorder模式 exactFit模式 fixedWidth模式 fixedHeight模式
HTML5游戏引擎(十六)-屏幕适配--showAll模式 & noScale模式 & noBorder模式 & exactFit模式 & fixedWidth模式 & ...
html5游戏引擎-Pharse.js学习笔记（一）
2019独角兽企业重金招聘Python工程师标准>>> 1.前言前几天随着flappy bird这样的小游戏的火爆,使我这种也曾了解过html5技术的js业余爱好者也开始关注游戏开 ...
HTML5游戏引擎Playcraft将于近日正式启动
HTML5游戏引擎Playcraft将于近日正式启动,该引擎5月时就已经发布了测试版,经过2个月的测试后,将于近日正式上线.创始人兼首席执行官马丁·韦尔斯介绍说,playcraft是一个为游戏设计者提 ...
HTML5游戏引擎Egret发布2.0版开发工具亦获更新
5月22日在北京国际会议中心举办的HTML5游戏生态大会上,白鹭时代旗下游戏引擎Egret Engine发布2.0版,同时还发布了Flash转换HTML5工具Egret Conversion.HTML ...
UC将发布高性能HTML5游戏引擎X-Canvas
近日,UC优视公司在北京举行了UC九游游戏平台战略发布会.在发布会上,UC九游宣布,即将发布HTML5游戏引擎X-Canvas,此引擎将致力于提升手机HTML5游戏的用户体验,解决开发者在此前HTM ...
QQ空间玩吧HTML5游戏引擎使用比例分析
GameLook报道/"Cocos 2015开发者大会(春季)"于4月2日在国家会议中心圆满落下帷幕.在会上全新的3D编辑器,Cocos Runtime等产品重磅公布,给业界带来了 ...
5款常用的html5游戏引擎以及优缺点分析
如果您是游戏开发人员,并且正在寻找JavaScript和html5无缝协作的游戏引擎. 虽然市场上有很多免费和付费的游戏引擎,但一款让专业游戏开发者满意的游戏引擎,必须包含独特的东西,所以游戏开发者对 ...

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

HTML5游戏引擎中音频的播放策略相关推荐

最新文章

热门文章