萧寂

微信浏览器自动播放音频(兼容Android和iOS)

由于各大浏览器更新之后不再支持自动播放音频了,微信浏览器也同样如此,本人做项目有个页面需要使用到浏览器自动播放,这里需要用到微信浏览器,本人使用以下方式实现了微信浏览器在android和ios的自动播放功能

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
    <script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <title>howler.js 测试自动播放 使用WeixinJSBridgeReady</title>
    <style>
        body{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        button{
            width: 200px;
            height: 50px;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <h5>微信浏览器自动播放/别的浏览器不自动播放代码示例</h5>
    <br>
    <button></button>
</body>

<script>
    let btn = document.querySelector('button')
    btn.innerHTML = '开始播放' // 默认开始播放

    // 初始化一个音频类，src资源可以是本地的有额可以是服务器上的
    var sound1 = new Howl({
        src: ['https://take-saas.oss-cn-hangzhou.aliyuncs.com/smile.mp3'],
        autoplay: true,
        loop: true,
        preload: true,
    })

    // 音频资源 load 之后通过微信桥接触发播放
    sound1.on('load', () => {
        window.WeixinJSBridge && window.WeixinJSBridge.invoke('getNetworkType', {}, () => {
            sound1.play()
        }, false)
    })

    sound1.on('play', () => {
        // 监听到播放的事件的话,显示正在播放暂停按钮
        btn.innerHTML = '暂停播放'
    });


    // 点击切换播放和不播放
    btn.addEventListener('click', () => {
        // sound1.playing()  为true代表正在播放 / 为false代表暂停
        if (sound1.playing()) {
            sound1.pause() // 停止视频
            btn.innerHTML = '开始播放' // 显示开始播放文字
        } else {
            sound1.play() // 播放视频 这里不用改文字,因为开始播放监听里面已经改过了,监听到播放就自动换
        }
    })

</script>

</html>

参考链接地址第一个二维码扫码实现,案例也是第一个

扫码播放测试

微信浏览器自动播放音频(兼容Android和iOS) ​

微信浏览器自动播放音频(兼容Android和iOS)