ios微信客戶端中聲音無法播放
阿新 • • 發佈：2019-02-01
html中audio標籤
<audio src="http://wx.masrbs.com/Addons/HFive/View/default/Public/music/flipsound.mp3" id="Jaudio" class="media-audio" preload="preload" ></audio>
js中播放程式碼
app.audioAutoPlay=function(id){
var audio = document.getElementById(id),
play = function(){
audio.play();
//document.removeEventListener("touchstart",play, false);
};
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
play();
}, false);
//document.addEventListener("touchstart",play, false);
}
在ios中點選按鈕觸發聲音播放是可以的，但是在滑動螢幕程式碼中呼叫播放聲音程式碼是無效的。在andriod下都沒有問題。
網上查找了很多資料，發現以下兩段話：
- 上面的解決方案的核心是利用了微信在ready的時候會有個
WeixinJSBridgeReady/YixinJSBridgeReady事件，通過監聽這個事件來觸發的。那有個坑就是如果微信已經ready了，但還沒執行到你監聽這個ready事件的程式碼，那麼你的監聽是沒用的，所以監聽的js一定要放在head的開始位置(放在css外鏈之前)，確保最先執行，切記！切記！。重要的事情說三遍。 - 另一個點就是，本文的解決方案只適合一開始就播放的背景音樂。如果你是做那種微信場景（開啟頁面模擬收到很多條微信，每條微信都要播放那段音效），實際上本文的解決方案是不行的。因為ready的事件只會執行一次，即使你在ready事件裡面用setTimeout或者setInterval也可能會導致丟失情況。
var shakeMusic = document.getElementById("Jaudio");
console.log(shakeMusic);
// 微信提供的事件，微信瀏覽器內部初始化完成後
document.addEventListener("WeixinJSBridgeReady", function () {
shakeMusic.load();
}, false);
};
此段程式碼放入setTimeout函式中，無法監聽weixinjsbridgeready事件的。我的頁面執行是先執行載入資原始檔，載入完畢渲染頁面，將監聽程式碼放入載入完畢渲染頁面方法中也無效。
將以上程式碼載入滑動播放聲音程式碼之前，問題解決。