解決html瀏覽器不能自動播放音樂

       根據相關規定要求，在未經用戶允許下不可以自動加載大流量的文件、視頻或音頻，所以微信，谷歌等客戶端自動屏蔽了< video > 中的autoplay 屬性。但是有以下幾種方法可以處理達到自動播放的目的。

1. 創建頁面監聽（WeixinJSBridgeReady）

       這種方法只適用於微信客戶端。原理：對頁面加載進行監聽，等待微信客戶端頁面加載完畢後，自動觸發音頻播放 。

<audio autoplay="autopaly" loop="loop" id="audios">
    <source src="music/bg.mp3" type="audio/mp3" />
</audio>
 
<script>
// 這裏使用了微信自帶的WeixinJSBridgeReady事件
document.addEventListener('WeixinJSBridgeReady', function() {
    document.getElementById('audios').play()
})
 
</script>

2.創建觸摸監聽（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>

3.創建點擊監聽（click）

       適用於電腦瀏覽器通過判斷用戶是否點擊鼠標開啓音樂播放。原理：當瀏覽器打開頁面時，通過點擊鼠標事件，來觸發音頻播放 。

<audio autoplay="autopaly" loop="loop" id="audios">
    <source src="music/bg.mp3" type="audio/mp3" />
</audio>
 
<script>
// 將以下代碼添加到js入口函數內即可
document.addEventListener('click', function() {
    document.getElementById('audios').play()
})
 
</script>