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

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

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

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

然后迫不得已，我重新換成了audio標簽，然后重新載瀏覽器中運行，果然出現了第一次項目中的報錯信息，但是很莫名的是，手機端居然能夠正常自動播放音樂了，除了ios微信端（因為是H5頁面，所以只測了微信，但是安卓的微信瀏覽器和其它瀏覽器是可以的）。

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

百度了很多方法，如下：

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

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

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

2、有小伙伴說明，ios為了節省用戶流量等，對於自動播放中塊管控很嚴格，必須要用戶交互后才可以調用audio.play()方法。所以我們就添加了觸摸屏幕的事件：

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

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

3、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播放音頻和視頻