微信端開發H5頁面的時候,audio標籤在蘋果機上無法進行自動播放
阿新 • • 發佈:2019-02-08
所遇問題
在微信端開發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
document.addEventListener("WeixinJSBridgeReady", function () {
Media.play();
}, false);