vue根据实时消息，自动播放对应语音

业务场景

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

实现

• 首先需要知道 谷歌在 66 版本以后就不允许自动播放音视频及通过函数触发play() 进行播放。 提示表明 用户必须先于浏览器进行交互，就是说用户必须通过点击 移动鼠标 等操作，才能播放音视频。 规则懂了，绕过就可以了。
• 做以下操作
  1. 在 app.vue 中添加 audio 元素，需要全局获取到元素。

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

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

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

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

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

代码没啥难度，实现思路是重点 一开始卡在了如何自动播放，蠢哭。