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

時間 2019-11-20

標籤微信開發 h5 頁面時候 audio 標籤蘋果機上沒法進行自動播放简体版

原文原文鏈接

所遇問題

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

緣由分析

<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標籤的屬性進行檢測android

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

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

因而嘗試使用js去注入一個路徑bash

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

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

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

解決辦法

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的更多知識，還請不吝賜教ui

相關標籤/搜索