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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ysy950803/article/details/87894170

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

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

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

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

<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>
展开阅读全文

没有更多推荐了,返回首页