前端入坑紀(jì) 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();
        });

這里代碼很清晰，就是有個按鈕和音頻，邏輯也就是點擊按鈕觸發(fā)播放音頻。
這很好，安卓上一切正常，可是一遇到ios就不起作用了。

所以，剩下的就是百度，google，國內(nèi)國外網(wǎng)站上了一個遍。最后得出的結(jié)論是，ios只有在用戶真正的交互發(fā)生才會觸發(fā)播放音樂。這就讓我很迷了，touchstart不就是用戶在交互了嗎？逗我玩嗎？

無奈的我只能繼續(xù)百度了，幸運的在簡書里看到了一篇相關(guān)文。因為是在微信里執(zhí)行這個HTML5游戲的，所以符合下面的代碼

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

上面就是要在等微信JSBridge準(zhǔn)備好后，加載這個音頻文件。那樣就可以排除用戶點擊了按鈕，沒聲音是文件還沒加載好的鍋。

然而，事實并非如此簡單，我這邊依舊無效.......沒有聲音......

最后，看到這里的你一定也猜到了。既然我都發(fā)文上來了，一定是解決了。是的，皇天不負(fù)苦心人，我把ogg換成了mp3，就全好了。

我的內(nèi)心其實是很奔潰的，為什么呢？

你懂的