audio h5自动播放

最新推荐文章于 2025-03-26 21:22:37 发布

热爱前端的小君同学

最新推荐文章于 2025-03-26 21:22:37 发布

阅读量1.2k

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_37815596/article/details/127092910

版权

报错

audio paly() failed because the user didn't interact with the document first

解决方法

需引入微信API接口，用JS控制代码如下：

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

//--创建页面监听，等待微信端页面加载完毕 触发音频播放
document.addEventListener('DOMContentLoaded', function () {
    function audioAutoPlay() {
        var audio = document.getElementById('audio');
        audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
    }
    audioAutoPlay();
});
//--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放
document.addEventListener('touchstart', function () {
    function audioAutoPlay() {
        var audio = document.getElementById('audio');
            audio.play();
    }
    audioAutoPlay();
});