vue 网页无法播放语音 failed because the user didn't interact with the document first.

出现该错误的原因：

谷歌在 66 版本以后就不允许自动播放音视频及通过函数触发play() 进行播放。 提示表明 用户必须先于浏览器进行交互，就是说用户必须通过点击 移动鼠标 等操作，才能播放音视频。

1. 在 app.vue 中添加 audio 元素，需要全局获取到元素。

    <audio class="audio"
           src="@/assets/media/success.mp3"
           controls
           id="audio"
           hidden="true">
    </audio>

2. 在页面进行操作前，进行一次触发，调用 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>

3. 在需要播放音频的页面使用audio.play() 方法 播放音频

   // 获取元素
  let audioDom = document.getElementById('audio')
  // 触发播放
  audioDom.play()

参考文章
vue根据实时消息，自动播放对应语音 - 掘金 (juejin.cn)