背景：

今天在制作前端页面时，想要给网页加上会自动播放的音乐，但是用audio标签设置音频的自动播放后，即使将autoplay属性设置成true，谷歌等浏览器页面加载完成后也不会自动播放音乐，尝试了各种办法无果。

原因：

目前，最为流行的浏览器共有五个：分别是Edge浏览器（属于微软），火狐，谷歌（chrome）Safari和Opera五大浏览器。以谷歌浏览器为例，在2018年4月发布的Chrome 66版本中，谷歌已经将带声音的视频自动播放默认禁止。只有用户点击或点按网站后媒体不播放声音或者（在桌面设备上）用户之前已对网站上的媒体表现出兴趣时，才允许自动播放。这会减少首次打开网页时带声音的意外视频播放。

也就是说谷歌浏览器最新版本只允许

1. 静音的音频
2. 有用户行为发生时
3. 播放器没有被隐藏

时候才能执行autoplay

解决办法:

以上2，3点必须满足所以只能让播放器显示出来，

给audio标签添加controls="controls"

然后让高度为0 style="height: 0" 只占一行的高度，但并不显示出来了

这样autoplay就有作用了

背景：

今天在制作前端页面时，想要给网页加上会自动播放的音乐，但是用audio标签设置音频的自动播放后，即使将autoplay属性设置成true，谷歌等浏览器页面加载完成后也不会自动播放音乐，尝试了各种办法无果。

原因：

目前，最为流行的浏览器共有五个：分别是Edge浏览器（属于微软），火狐，谷歌（chrome）Safari和Opera五大浏览器。以谷歌浏览器为例，在2018年4月发布的Chrome 66版本中，谷歌已经将带声音的视频自动播放默认禁止。只有用户点击或点按网站后媒体不播放声音或者（在桌面设备上）用户之前已对网站上的媒体表现出兴趣时，才允许自动播放。这会减少首次打开网页时带声音的意外视频播放。

也就是说谷歌浏览器最新版本只允许

1. 静音的音频
2. 有用户行为发生时
3. 播放器没有被隐藏

时候才能执行autoplay

解决办法:

以上2，3点必须满足所以只能让播放器显示出来，

给audio标签添加controls="controls"

然后让高度为0 style="height: 0" 只占一行的高度，但并不显示出来了

这样autoplay就有作用了