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

2023-12-26 22:17:34

大家可以参考这篇文章: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>

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

若有侵权,请联系我删除哈!

文章来源:https://blog.csdn.net/qq_37703224/article/details/135229268
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。