音频自动播放浏览器限制问题解决

最近在做后台系统的时候，想为新消息做一个语音提醒，但是在Chrome浏览器下调用audio播放器的play()方法会报这个错：DOMException: play() failed because the user didn't interact with the document first. 大致意思是浏览器不允许在用户还未进行交互操作的时候就进行播放，为的是减少给用户带来的干扰。解决这个问题的大体思路是：一开始给播放器静音，然后监听页面操作，等用户有页面操作之后再设置播放器取消静音，然后就可以正常播放了。

一、初始化播放器(vue中示例)

created() {
   //使用Audio构造函数创建音频播放器对象
   this.audioObj = new Audio()
   //设置播放文件地址
   this.audioObj.src = require('@assets/media/audio/new_message.mp3')
   //设置静音
   this.audioObj.muted = true
  //监听页面鼠标按下的事件
  document.body.addEventListener('mousedown', (res) => {
      if (this.audioObj) {
        //等到用户有交互操作了之后，就取消静音
        this.audioObj.muted = false
      }
    })
  },

二、播放音频

methods:{
    //播放音频
    playAudio() {
       //如果播放器存在并且取消了静音设置就可以播放
       if (this.audioObj && !this.audioObj.muted) {
          this.audioObj.play()
       }
    },
    ...
}

三、参考

HTMLAudioElement