更新時間:2021-12-23 文章分類:網頁技術課堂
聲音沒法自動播放這個在移動端上面一直是個慣例,目前經過測試,好像也就IE瀏覽器還支持播放背景音樂。其他電腦版的瀏覽器也相繼關掉了聲音自動播放,今天STU針對電腦和移動端分享兩種方法可以達到網頁背景音樂自動播放的目的。
適用于電腦瀏覽器通過判斷用戶是否點擊鼠標開啟音樂播放。原理:當瀏覽器打開頁面時,通過點擊鼠標事件,來觸發音頻播放 。
<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>通過判斷用戶是否觸摸屏幕開啟音樂播放。原理:當瀏覽器打開頁面時,通過觸摸屏幕事件,來觸發音頻播放 。
<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>