Chrome66禁止进入页面自动播放音频解决方案，Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first

Chrome浏览器66版本以后都禁止用户进入页面自动触发audio或video自动播放

必须用户手动点击播放才可以播放 所以就来个一个这样的报错

想大厂们 例如：优酷 腾讯 爱奇艺面对Chrome都采取了相关措施：引导用户点击开启声音或者进入页面后默认静音。

上面两种方案都是可行的 我做的vue+node+socket.io中监听了一个用户列表进入聊天室触发提示音的 具体如下

默认进入页面静音 给audio加上muted

 加个watch

watch: {
    isOpenMusic: {
      handler(val) {
        if (val) {
          this.$refs.audio.muted = "";
          console.log("有声音");
        } else {
          this.$refs.audio.muted = "muted";
          console.log("静音");
        }
      },
    },
  },

给个按钮动态切换

<i
        class="iconfont"
        style="font-size: 1.2rem; cursor: pointer; color: #ffffff"
        :class="[isOpenMusic ? 'icon-shengyin' : 'icon-shengyinguanbi']"
        @click="isOpenMusic = !isOpenMusic"
      ></i>

methods上

audioPlay() {
      setTimeout(() => {
        this.$refs.audio.play();
      }, 10);
},

sockets钩子

socket:{
//监听用户列表
    updateUserList(data) {
      this.loginUserList = data;
      if (this.isOpenMusic) {
        this.audioSrc = require("../assets/上线.wav");
        this.audioPlay();
      }
    },
}

这样 默认用户进来页面声音就是关的 需要自己手动点击打开声音才会听到聊天室用户列表的更新