オーディオ オーディオがソリューションを自動的に再生できません

ブラウザの制限により、オーディオの自動再生は許可されておらず、オンラインの方法を試しても進展がありません (解決策がある場合は、コメントを歓迎します~)

---

1.まずaudioタグを作成します

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

2. アニメーションはページ更新後に最初に実行する必要があり、音楽はアニメーションが完了してから再生されるため、実装された機能が実行されると、音楽ソースが最初にロードされます。

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

3.アニメーションが完了したら、BGMを初期化します

        1. audioタグのplayメソッドを実行します（現時点ではAndroidの内蔵ブラウザが自動再生をサポートしています）

        2. WeChat ブラウザの処理 (追加しない場合、IOS WeChat は自動再生をサポートしません)

        3. イベント監視を追加します (PC ではクリック イベント、モバイルではタッチスタート イベント)

        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)
    }    
}

4.音楽の再生、一時停止

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;
    }
}

---

ヒント

音楽ソースを交換した後、音楽がオフになっているときに自動的に再生されないように、手動で音楽を一時停止する必要があります。

参考リンク：https://www.panyanbin.com/article/2940754d.html