audio音频不能自动播放的解决方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了audio音频不能自动播放的解决方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

由于浏览器限制的原因，不允许自动播放audio音频，尝试网上的方法后也没有进展（如果有解决方法，欢迎评论~）

一、首先创建 audio 标签

<audio class="g-back-music" src="" ref="backMusicRef" loop preload hidden autoplay></audio>

二、因为在页面刷新后需要先执行动画，动画完成后才去播放音乐，所以在执行 mounted 函数时，先加载音乐源

mounted() {
    if(this.sGetCurrentMusicSrc) {
        // 存在背景音乐，加载音乐源
        this.$refs.backMusicRef.src = this.sGetCurrentMusicSrc;
    }
}

三、在动画完成后，进行背景音乐的初始化

1. 执行 audio 标签的play方法（目前来看安卓自带浏览器是支持自动播放的）

2. 微信浏览器的处理（如果不加，IOS微信端就不支持自动播放了）

3. 增加事件监听（PC端 click事件、手机端 touchstart 事件）

4. 变量说明：bIsMusicPlay（控制音乐是否播放）

// 初始化音乐
fnMusicInit() {
    this.$refs.backMusicRef.play().then(() => {
        this.bIsMusicPlay = true;
    }).catch(()=> {
        this.bIsMusicPlay = false;
    })
    if(navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger") {
        // 微信浏览器
        WeixinJSBridge.invoke('getNetworkType', {}, ()=> {
            this.$refs.backMusicRef.play().then(()=> {
                this.bIsMusicPlay = true;
            }).catch(()=> {
                this.bIsMusicPlay = false;
            })
        });
    }
    let fnPlay = (event)=> {
        let className = event.target.className;
        if(typeof className === 'object' || typeof className === 'string' && !className.includes('g-music')) {
            // 点击非音乐开关按钮，播放音乐
            this.$refs.backMusicRef.play().then(()=> {
                this.bIsMusicPlay = true;
            }).catch(()=> {
                this.bIsMusicPlay = false;
            })
        }
        let type  = 'ontouchstart' in document.documentElement ? 'touchstart' :　'mousedown';
        // 最后记得移除监听
        document.removeEventListener(type, fnPlay);
    }
    // 监听用户主动操作
    if('ontouchstart' in document.documentElement) {
        document.addEventListener('touchstart', fnPlay)
    } else {
        document.addEventListener('mousedown', fnPlay)
    }    
}

四、音乐的播放，暂停

fnMusicOpera(type) {
    if(type === 'play') {
        // 播放
        this.$refs.backMusicRef.play().then(()=> {
            this.bIsMusicPlay = true;
        }).catch(()=> {
            this.bIsMusicPlay = false;
        }) 
    } else {
        // 暂停
        this.$refs.backMusicRef.pause();
        this.bIsMusicPlay = false;
    }
}