在谷歌浏览器中使用JavaScript实现MP3自动播放

大家可以参考这篇文章：https://developer.chrome.com/blog/autoplay?hl=zh-cn

今天给一个客户实现页面自动播放音乐的功能，一开始以为很简单，不过后来才发现，随着谷歌浏览器的升级，自动播放的功能已经被禁用了。

不过，在经过一番搜索之后，终于找到了比较合适的解决方案。

解决方案的原文请参考：https://blog.csdn.net/qq_41764462/article/details/111135774

这里主要记录以下这位大佬的解决方案，先看看代码：

<script>
    // 为了防止第二次创建
    let playState = true

    function testAutoPlay() {
        // 返回一个promise以告诉调用者检测结果
        return new Promise(resolve => {
            if (playState) {
                let audio = document.createElement('audio');
                audio.src = "img/Ado - 新時代 (ウタ from ONE PIECE FILM RED) (V0).mp3"
                //循环播放，如果不需要可注释
                audio.loop = "loop"
                document.body.appendChild(audio);
                let autoplay = true;
                // play返回的是一个promise
                audio.play().then(() => {
                    // 支持自动播放
                    autoplay = true;
                    console.log("正常播放")
                }).catch(err => {
                    // 不支持自动播放
                    console.log("不支持播放")
                    autoplay = false;
                }).finally((e) => {
                    resolve(autoplay);
                });
                playState = false
            } else {
                resolve(false)
            }

        });
    }

    let audioInfo = {
        autoplay: false,
        testAutoPlay() {
            return testAutoPlay()
        },
        // 监听页面的点击事件，一旦点过了就能autoplay了
        setAutoPlayWhenClick() {
            function setAutoPlay() {
                // 设置自动播放为true
                audioInfo.autoplay = true;
                document.removeEventListener('click', setAutoPlay);
                document.removeEventListener('touchend', setAutoPlay);
            }

            document.addEventListener('click', setAutoPlay);
            document.addEventListener('touchend', setAutoPlay);
        },
        init() {
            // 检测是否能自动播放
            audioInfo.testAutoPlay().then(autoplay => {
                if (!audioInfo.autoplay) {
                    audioInfo.autoplay = autoplay;
                }
            });
            // 用户点击交互之后，设置成能自动播放
            audioInfo.setAutoPlayWhenClick();
        }
    };
    // PC端
    document.addEventListener('click', () => {
        audioInfo.init();
    });
    // 移动端
    document.addEventListener('touchend', () => {
        audioInfo.init();
    });
</script>

这个代码实测是没有什么问题的，点击界面上任何一个地方以后，音乐开始自动播放。特此记录，方便后面整理的和回忆。

若有侵权，请联系我删除哈！