vue使用audio无法自动播放？

Question

页面上有一个弹框，弹框放了一个 audio 标签，然后通过消息推送，如果有推送过来的信息有异常错误，则弹框提示，并且自动播放报警声音。

            <audio 
                loop="loop" 
                preload="auto"
                ref="warningAudio"
                autoplay
                muted
            >
                <source src="./assets/mp3/警报.mp3" type="audio/mp3">
            </audio>

如果有异常，则显示弹框，并且播放声音

        handleOpenVoice() {
            this.is_stop = false
            this.$refs.warningAudio.play()
        },

现在的问题是，弹框显示了，但是执行 this.$refs.warningAudio.play() 报错了，没有播放声音，关闭该弹框，第二来错误信息，显示弹框，才能自动播放声音，查了一下，说是chrome 阻止自动播放了，有什么办法处理呢 ？

Answer 1

现在的浏览器会禁用音视频的自动播放，直到用户操作之后。所以可以在项目启动后做一个Dialog组件请求用户打开自动播放声音，当用户点击之后后续的音频就可以自动播放了。
具体的操作思路可以看一下这款VSC的插件 🌈 Rainbow Fart 它的实现思路。

但是这样每一次启动项目都会需要用户点击授权，如果想要永远解决问题，可以去浏览器设置中配置声音选项，项目的域名添加进去。

---

相关阅读

Autoplay policy in Chrome - Chrome Developers
Autoplay guide for media and Web Audio APIs - Web media technologies | MDN