解决新版浏览器autoplay不能自动播放的问题

自己一直有个人小主页,就展示下简历信息啥的,搞得比较花里胡哨,整了个audio标签来自动播放网页背景音乐:

<audio autoplay="autoplay">
	<source src="/personal_home/home_bg_music.mp3"/>
audio>

只要一打开网页,就愉快地响起炫酷的BGM了,然而好景不长。
其实我都不知道是啥时候开始的,谷歌Chrome和苹果Safari等浏览器就相继出台规定了:我们要禁止自动播放,你这些吵人的家伙!
具体信息可参见:Chrome 66禁止声音自动播放之后
哎呀,毕竟小网站嘛,一年访问量就几百次的,说不定有一半还是爬虫,这么好听的歌曲你不让我放怪难受的。于是乎去万能Google搜了下解决办法:





<iframe src="/personal_home/home_bg_music.mp3" allow="autoplay" style="display:none" id="iframeAudio">iframe>

直接用iframe来替代,然后刷新网页,BGM再次燃起!意外的是,怎么网页白了?
哦,原来是我之前把audio标签放在body前面了,解决的时候直接在audio下面加上了iframe,显然这玩意儿不是异步的,阻塞了我后面body内容的解析,所以把iframe放在body后面就行啦!

...
body>
...
<iframe src="/personal_home/home_bg_music.mp3" allow="autoplay" style="display:none" id="iframeAudio">iframe>

你可能感兴趣的:(Web)