在浏览器中不能自动播放网页背景音乐的解决办法

声音没法自动播放这个在移动端上面一直是个惯例，目前经过测试，好像也就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>