https://blog.csdn.net/PY0312/article/details/90349386
由於Android，IOS移動端的瀏覽器以及微信自帶的瀏覽器為了用戶更好的體驗，規定不自動播放音頻視頻，默認屏蔽了autoplay，如果要想達到自動播放效果，需要單獨處理，方法有以下幾種：
第一種：添加控制屬性（controls）
原理：直接使用行內式添加controls屬性，顯示控制按鈕，讓用戶手動觸發音頻播放
<audio autoplay="autopaly" loop="loop" controls="controls" id="audios">
<source src="music/bg.mp3" type="audio/mp3" />
</audio>
第二種：創建頁面監聽（WeixinJSBridgeReady）
原理：對頁面加載進行監聽，等待微信客戶端頁面加載完畢后，自動觸發音頻播放
<audio autoplay="autopaly" loop="loop" id="audios">
<source src="music/bg.mp3" type="audio/mp3" />
</audio>
<script>
// 將以下代碼添加到js入口函數內即可
// 這里使用了微信自帶的WeixinJSBridgeReady事件
document.addEventListener('WeixinJSBridgeReady', function() {
document.getElementById('audios').play()
})
</script>
第三種：創建觸摸監聽（touchstart）
原理：當瀏覽器打開頁面時，通過觸摸屏幕事件，來觸發音頻播放
<audio autoplay="autopaly" loop="loop" id="audios">
<source src="music/bg.mp3" type="audio/mp3" />
</audio>
<script>
// 將以下代碼添加到js入口函數內即可
document.addEventListener('touchstart', function() {
document.getElementById('audios').play()
})
</script>
第四種：綜合以上自定義Func實現交互觸發play()
不推薦此方法，上面三種方法足以解決日常問題
<audio src="bg.mp3" id="audios" autoplay preload loop="loop"></audio>
<script>
function audioAutoPlay(id){
var audio = document.getElementById(id),
play = function(){
audio.play();
document.removeEventListener("touchstart",play, false);
};
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
play();
}, false);
document.addEventListener('YixinJSBridgeReady', function() {
play();
}, false);
document.addEventListener("touchstart",play, false);
}
audioAutoPlay('audios');
</script>
https://www.cnblogs.com/viphchok/p/5315031.html
圖片加載完成:
https://blog.csdn.net/hbiao68/article/details/52683322