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

时间:2025-02-16 08:23: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>

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