【bug解決】ios微信瀏覽器中背景音樂沒法播放

我記得以前在一次項目中，出現過瀏覽報錯：

當時的文檔連接如右：【解決】HTML5新標籤audio的autoplay自動播放屬性失效的解決方案

因此在此次H5的製做中，我使用了iframe來加載音頻文件，使用這種方式後，電腦端是沒有問題的，可是當上傳至服務器上在手機上瀏覽時，會出現點擊音樂旋轉按鈕沒法暫停播放音樂（使用iframe以後至關於一個子文檔#document，可是我也找到方法獲取子文檔中的audio元素了，可是不知道爲何點擊按鈕後，暫停播放功能沒法生效）、ios瀏覽器中音樂沒法自動播放...等等問題

而後無可奈何，我從新換成了audio標籤，而後從新載瀏覽器中運行，果真出現了第一次項目中的報錯信息，可是很莫名的是，手機端竟然可以正常自動播放音樂了，除了ios微信端（由於是H5頁面，因此只測了微信，可是安卓的微信瀏覽器和其它瀏覽器是能夠的）。

那麼接下來就是要解決ios微信端沒法自動播放的問題。

百度了不少方法，以下：

一、js中當文檔加載完畢後，獲取audio元素，而後調用audio.play()方法：

window.load = function(){
　　const audio = document.getElementByTagName('audio')[0];
　　audio.play();     
}

運行結果：無效。報錯Uncaught(in promise) DOMException

二、有小夥伴說明，ios爲了節省用戶流量等，對於自動播放中塊管控很嚴格，必需要用戶交互後才能夠調用audio.play()方法。因此咱們就添加了觸摸屏幕的事件：

document.addEventListener('touchstart', function () {
　　if (key) {
　　　　audio.play();
　　　　audio.loop = true;
　　　　key = false;
　　}
})

運行結果：不能根本解決。至關於就是要經過用戶觸摸屏幕後才能播放音樂，但這個是治標不治本，若是用戶沒有一打開就觸摸屏幕，那就會一很長一段時間都沒音樂。

三、WeixinJSBridge接口解決微信中時候視頻和音頻自動播放問題：

function audioAutoPlay(id) {

　　let audio = document.getElementById(id); // 並不必定非要用ID獲取，class值獲取也能夠

　　audio.play(); // 爲了保險起見 這裏頁也手動調用一下

　　audio.loop = true; // 如上 爲了音樂可以循環播放

　　document.addEventListener("WeixinJSBridgeReady", function () {

　　　　audio.play();

　　　　audio.loop = true;

　　}, false);

　　document.addEventListener('YixinJSBridgeReady', function () { // 暫時還不知道Yixin是什麼東西...

　　　　audio.play();

　　　　audio.loop = true;

　　}, false);

}

audioAutoPlay(id); // 傳入audio標籤的id值

運行結果：解決。這個是微信場景專門提供的api方法，能夠解決ios中音視頻不能自動播放背景音樂的bug...

不過這個也仍是有一點問題，就是總感受ios比安卓背景音樂播放反應有點遲鈍。安卓基本一打開就有音樂，可是ios差不定多要等三秒左右，也不知道是什麼問題...

 

 【補充知識】

 

 【參考網址】

在微信中使用audio播放音頻和視頻