HTML5 游戏中 使用audio时遇到的那些坑

1. 前言

过去两年我曾经在HTML5网页游戏声音播放上花费了大量时间来找坑，填坑。在这里我把过去的经验记录于此。

2. IE11

2.1 不支持Web Audio

IE 是我用过的唯一不支持 Web Audio 的浏览器。解决方案就是用HTML5 audio。什么？你的IE连HTML5 audio 也不支持？呃，那个解决的方案更简单，直接跟产品经理哭诉：不能支持IE6哇…

2.2 声音格式

某些格式比如ogg是不支持的。解决方案是：用支持的格式，比如mp3, m4a。

2.3 声音加载

在声音方面，IE 11表现得非常不稳定，这导致了不同的电脑上，不同的windows系统版本上（即使相同的也不行，比如win7）出现各种奇怪的不一致。简言之，到处都是bug…
有的机器上有缓存声音就会加载失败。解决方案慎用：对IE禁用声音文件的缓存。
有的机器上audio标签多到一定数量就会加载失败。解决方案：减少声音数量，个人经验控制在50个之内。如果实在减不了就用声音精灵吧。

2.4 声音播放

初次启动声音可能有比较大的延迟，比如1～2秒，这样的话播个网页背景音乐还勉强，用在游戏上就诡异了。解决方案是：加载时提前播一次然后立刻暂停。
重复的同一声音不能同时播放，解决方案：多建几个audio tag。注意上面2.3节里提到过标签不能太多…

3. Safari

3.1 声音触发

在移动端，默认是不能自动播放声音的，必须是用户的操作，比如touchstart, click等来触发。解决方案是游戏开始的时候让用户点个开始或者选择一下声音什么的，在响应函数里面启动然后立刻暂停声音。有的声音引擎如Howler自动集成了这个功能。

4 Chrome

4.1 声音触发

Chrome刚刚在2017年末的新版里也加入了对于移动端自动播放声音的限制。情况和Safari基本相同，但更严格的是不能用touch事件触发，必须click。解决方案是：做个按钮啥的让玩家点，以此来触发声音。