1. 程式人生 > >微信端開發H5頁面的時候,audio標籤在蘋果機上無法進行自動播放

微信端開發H5頁面的時候,audio標籤在蘋果機上無法進行自動播放

所遇問題

在微信端開發H5的時候,audio標籤在蘋果機上無法進行自動播放

原因分析及解決方案

<audio controls="controls" id="music" loop="loop">
    <source src="./assets/sound/music.mp3" type="audio/ogg" />
    <source src="./assets/sound/music.ogg" type="audio/ogg" />
</audio>

這是我html上的程式碼,經過執行發現android機上能夠良好的呈現並播放,但是在蘋果機上呈現的是一條白槓和一個無法使用的三角形按鈕。
使用Audio標籤的屬性進行檢測

Media = document.getElementById("music");
alert(Media.networkState);// 狀態碼顯示為3,表示Audio沒有找到資源路徑

於是嘗試使用js去注入一個路徑,發現蘋果機的音樂播放問題被解決了

Media.src = "./assets/sound/music.mp3"; 
Media.play();

問題拓展

畢竟我和大家遇到的問題不一樣,也許這個方法並不能解決大家的問題。這裡拓展一下其他的實現方法。
1. 應該是出於IOS系統本身的設計規範緣故,會不允許音樂的自動播放功能。這裡我們可以給頁面一個touch事件來觸發播放功能。
2. 微信自己提供了一個WeixinJSBridgeReady

事件,我們可以監聽這個事件觸發播放功能。微信官方API

document.addEventListener("WeixinJSBridgeReady", function () {
    Media.play();
}, false);