vue使用audio无法自动播放？

  • Z时代
  • 2024-03-12
  • 分类：IT

页面上有一个弹框，弹框放了一个 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 阻止自动播放了，有什么办法处理呢 ？

回答：

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

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

相关阅读

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

以上是 vue使用audio无法自动播放？ 的全部内容， 来源链接： utcz.com/p/932911.html

回到顶部