2025年3月24日 星期一 甲辰(龙)年 月廿三 夜 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

网页audio标签中autoplay自动播放音乐失败解决方案

时间:10-27来源:作者:点击数:26

这几天写了一个网页,想给网页加一个背景音乐,随着页面加载好自动播放,一直实现不了,也没有报错,后来查询资料原来是因为audio设置的autoplay属性,记录一下。

原本

  • <audio preload autoplay loop id="music">
  • <source src="/music/bg.mp3" type="audio/mpeg">
  • </audio>

Chrome提示:DOMException: play() failed because the user didn’t interact with the document first.

原因:

Chrome等浏览器基于安全的策略,于早几年就已经停止自动播放

解决方法:

进入页面随便点击一下页面,这样用户和浏览器就产生了交互,可以开启自动播放

  • <script type="text/javascript">
  • window.onload = function(){
  • setInterval("toggleSound()",1);
  • }
  • function toggleSound() {
  • var music = document.getElementById("music");//获取ID
  • if (music.paused) { //判读是否播放
  • music.paused=false;
  • music.play(); //没有就播放
  • }
  • }
  • </script>

如果该文章对你有帮助的话,请留下一个赞👍把。

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门