出现该错误的原因:
谷歌在 66 版本以后就不允许自动播放音视频及通过函数触发play() 进行播放。 提示表明 用户必须先于浏览器进行交互,就是说用户必须通过点击 移动鼠标 等操作,才能播放音视频。
- 在 app.vue 中添加 audio 元素,需要全局获取到元素。
<audio class="audio"
src="@/assets/media/success.mp3"
controls
id="audio"
hidden="true">
</audio>
- 在页面进行操作前,进行一次触发,调用 audio 方法完成首次交互(地方无所谓,保证一定会在播放前触发一次交互就可以)
我这边因只需在一个页面使用,为了触发事件,选择移动鼠标监听mousemove触发
<template>
<div @mousemove="onMouseMove">
xxxxx内容与组件等
</div>
</template>
<script>
export default {
data() {
return {
audioState:false //触发状态,避免重复触发导致音频自动暂停
}
},
methods: {
onMouseMove() {
if (!this.audioState) {
// 获取元素标签
let audioDom = document.getElementById('audio')
// 触发交互
audioDom.pause()
this.audioState = true
}
},
}
}
</script>
- 在需要播放音频的页面使用audio.play() 方法 播放音频
// 获取元素
let audioDom = document.getElementById('audio')
// 触发播放
audioDom.play()