iOS音频播放问题

问题

24好玩平台上的游戏，尤其是iOS设备，点击开始游戏，偶尔会播放不了音乐。另外，如果点击一下游戏界面，则可以进行播放了。

背景

iOS Safari规定，播放多媒体需要用户明确的操作来触发，才可以播放，主要原因是出于保护用户的流量。

参考：Safari HTML5 Audio and Video Guide - iOS-Specific Considerations

问题产生原因

v-tap

我们使用了一个叫v-tap的库来处理开始游戏的点击事件，支持PC端和移动端。 它是封装了touchstart、touchend事件，还有vue的指令，来实现tap的事件，但使用该库去触发音乐播放时不一定正常，替换成原生的touchstart事件即可。 没有去深究为什么这个库会造成这个问题，可作为日后的一个课题。

Phaser

Phaser框架需要用户触摸到canvas，才会解锁音频的加载和播放。 我们的开始页是用DOM实现的，因此点击开始游戏的时候，并没有触摸到canvas元素，也就没有解锁了。

解决方案

• 使用touchstart来处理开始游戏的点击事件，PC端则单独绑定click事件。
• Phaser的游戏在点击开始游戏时执行game.sound.unlock，意思是手动解锁Phaser的音频加载和播放。
• 另外绑定touchstart的话会造成进入游戏时多点击了一次，因此在进入游戏时禁止操作，200毫秒后进行解锁。