18910140161

audio自动播放失效:vue使用audio无法自动播放?

顺晟科技

2022-09-25 07:35:22

144

页面上有一个弹框,弹框放了一个 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的插件

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航