业务场景

后端实时比对产生预警信息，前端通过WebSocket接收预警信息并播放音频。

实现

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

做以下操作

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

   <!-- 预警声音 音频元素   -->
    <audio class="audio"
           src="@/assets/MP3/warnings.mp3"
           controls
           id="warningAudio"
           hidden="true">
    </audio>

在login.vue 登录页面进行登陆时，登录成功，调用 audio 方法完成首次交互（地方无所谓，保证一定会在播放前触发一次交互就可以）

        // 获取元素标签
        let warningAudioDom = document.getElementById('warningAudio')
    // 触发交互
        warningAudioDom.pause()

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

   // 预警声音播放
   // 获取元素
  let warningAudioDom = document.getElementById('warningAudio')
  // 触发播放
  warningAudioDom.play()

浏览器需要先交互才一定可以自动播放

终极办法

猛击查看

play 方法返回的是一个 promise，通过 catch 捕获错误

const audio = new Audio('xxxurl');

audio.play()
    .then(() => {
      // 做对应的处理
    })
    .catch((error) => {
      if (error instanceof DOMException) {
        // 这里可以根据异常类型进行相应的错误处理
        if (error.name === "NotAllowedError") {
          // 做对应的处理
        }
      }
    });