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

这几天写了一个网页,想给网页加一个背景音乐,随着页面加载好自动播放,一直实现不了,也没有报错,后来查询资料原来是因为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>
参考文献
  • https://blog.csdn.net/qq_30136729/article/details/121482527
  • 1
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

安替-AnTi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值