前端入坑纪 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,就全好了。
我的内心其实是很奔溃的,为什么呢?