vue中解决chrome浏览器自动播放音频

需求

用户登录后，若有报警消息，则自动播放警报音频

问题

Chrome浏览器无法自动播放音频视频，用autoplay和play()都不起作用，会报错Uncaught (in promise) DOMException

解决方案

先静音音频，等到用户有任何操作后再打开音频
1.app.vue

<template>
  <div id="app">
    <audio ref="audio" :src="audio" loop autoplay muted hidden>
      您的浏览器不支持 audio 标签。
    </audio>
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'App',
  data(){
    return {
      audio:this.UrlConstant.HOST_OTHERS+'warm1.mp3'
    }
  },
  methods:{
    playAudio(type){
      switch (type) {
        case 1://播放音频
          this.$refs.audio.muted = false
          this.$refs.audio.play()
          break
        case 2://暂停音频
          this.$refs.audio.pause()
          break
      }
    },
  },
  mounted(){
      this.Bus.$on('playAudio',type=>this.playAudio(type))
      var that = this
      document.body.addEventListener('mousedown', function(){
          that.playAudio(1)//播放音频
          that.playAudio(2)//暂停音频
      })
  }
}
</script>

2.websocket中

initWebsocket(){
   ...//建立连接
   ws.onmessage = function (evt) {
        ...//获取数据
       if(that.messageList.length>0){
              that.Bus.$emit('playAudio',1)//获取数据后播放音频
        }
   ｝
｝

参考文章：解决Chrome浏览器无法自动播放音频视频的问题，Uncaught (in promise) DOMException