关于ios上audio的思考

前端入坑纪 34

Up主最近接手了一个HTML5的小游戏，一切都很顺利，直到遇到ios。

人生太多不确定，何况还是前端，更是体会深切啊。

<audio hidden id="yao" src="007.ogg"></audio>
<a id="szBtn" href="javascript:;"></a>

var szBtn = document.getElementById("szBtn");
var yaudio = document.getElementById("yao");

szBtn.addEventListener("touchstart", function() {      
            yaudio.play();
        });

这里代码很清晰，就是有个按钮和音频，逻辑也就是点击按钮触发播放音频。
这很好，安卓上一切正常，可是一遇到ios就不起作用了。

所以，剩下的就是百度，google，国内国外网站上了一个遍。最后得出的结论是，ios只有在用户真正的交互发生才会触发播放音乐。这就让我很迷了，touchstart不就是用户在交互了吗？逗我玩吗？

无奈的我只能继续百度了，幸运的在简书里看到了一篇相关文。因为是在微信里执行这个HTML5游戏的，所以符合下面的代码

document.addEventListener("WeixinJSBridgeReady", function() {
            yaudio.load();
        }, false);

上面就是要在等微信JSBridge准备好后，加载这个音频文件。那样就可以排除用户点击了按钮，没声音是文件还没加载好的锅。

然而，事实并非如此简单，我这边依旧无效.......没有声音......

最后，看到这里的你一定也猜到了。既然我都发文上来了，一定是解决了。是的，皇天不负苦心人，我把ogg换成了mp3，就全好了。

我的内心其实是很奔溃的，为什么呢？

你懂的