微信端開發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沒有找到資源路徑

更多關於Audio標簽的屬性和方法，可點擊此處

於是嘗試使用js去注入一個路徑

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

發現蘋果機的音樂播放問題被解決了

如果問題沒有被解決請參考以下這篇文章 
解決ios下的微信頁面背景音樂無法自動播放問題

解決辦法

html: <audio controls="controls" id="music" loop="loop" style="display: none"> <source src="./assets/sound/music.mp3" type="audio/ogg" /> <source src="./assets/sound/music.ogg" type="audio/ogg" /> </audio> js: Media = document.getElementById("music"); Media.src = "./assets/sound/music.mp3"; Media.play();

問題總結

個人猜測：蘋果手機對靜態標簽的src支持可能不太友好, 需要js注入路徑才能播放（純屬新手的個人猜測，希望有朋友能正確引導我） 
問題擴展：曾經有一段時間是蘋果機的音樂能夠播放，android機不能播放，至今未找到原因，如果有人知曉關於audio的更多知識，還請不吝賜教