html页面audio的autoplay自动播放音乐失败解决方案

33 篇文章 0 订阅

这几天写了一个网页,想给网页加一个背景音乐,随着页面加载好自动播放,一直实现不了,也没有报错,后来查询资料原来是因为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>

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

  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值