audio autoplay无效的问题

前言：当有报警信息推送过来的时候，播放自动播放报警声音

有些浏览器版本不支持自动播放，需要用户手动点击播放
规律：只要进入页面，进行一次点击事件，便能自动播放音乐

 data() {
    return { 
      music: {},
    };
  },
mounted() {
    this.init();
    this.music = new Audio();
    this.music.src = "/static/alarm.wav";
    this.music.muted = this.muted;
    //如果点击了一次，则可以自动播放声音
    document.addEventListener('click', this.initMusic);
  },
  computed: {
    ...mapGetters(["muted"])
    }

  methods: {
    initMusic(event){
        if(event.target.id != 'alarm-img-icon'){
             this.music.muted = false; 
             this.$store.commit('setMuted',false)
        }
        document.removeEventListener('click',this.initMusic);
    },
   }

子页面：

import { mapGetters } from "vuex";

<div class="alarm-icon" >
          <el-tooltip class="item" effect="dark" :content="!muted ? '关闭告警声音':'开启告警声音'" placement="top">
            <i id="alarm-img-icon" :class="['el-icon-bell',!muted?'blue':'']" @click="toggleAlarmAudio"></i>
        </el-tooltip>
      </div>

computed: {
      ...mapGetters(["muted"]),
}

 //设置告警声音
    toggleAlarmAudio(){
        this.$parent.music.muted  = !this.muted;
        this.$store.commit("setMuted",!this.muted);
    },

store

store:{
 muted:true,
},
 mutations: {
    setMuted(state,muted){
        state.muted = muted;
    },
   }
getters:{
	muted: state => state.muted,
}