vue项目背景音乐自动播放 我用了audio标签。如下：

问题所在：某些浏览器为了用户不受打扰惊吓，不允许自动播放音乐，视频等。一部分浏览器又允许自动播放
解决方案：在audio标签上添加autoplay属性。能自动播放的浏览器自动播放。再给window加个点击事件监听。不能自动播放的浏览器，只要用户点击了页面任何地方，自动开启背景音乐播放。

html

<audio  v-if="bgmUrl" loop ref="mAudio" autoplay @play="startMusic" style="display: none" >
      <source :src="bgmUrl" />
</audio>
<!-->音乐开关 <-->
<div>
      <span class=" iconfont" :class="{'iconyinle':!musicState,'iconyinle1 xuan-z-m':musicState}" @click.stop="changeMS"></span>
</div>
<!-->百度搜索阿里图标库，找到想要的图标。一个用作音乐播放状态，一个用作音乐停止状态 <-->
<!-->这里的iconfont，iconyinle，iconyinle1为阿里图标库的图标类名。阿里图标转为字体图标。网上搜教程即可<-->

js

data(){
            return{
                bgmUrl:require('../../assets/bgm.mp3')
                musicState:false//记录音乐播放状态 true为播放
            }
},
mounted:{
                        window.addEventListener('click',this.playMusic,true)
}
methods:{
            startMusic(){//音频开始播放时（@play）
                this.musicState = true
                // this.$refs.mAudio.volume = 0.2  //初始音量
                window.removeEventListener('click',this.playMusic,true)//移除点击事件监听
            },
            playMusic(){//当音乐需要自动播放时

                if (this.$refs.mAudio.paused) {
                    this.$refs.mAudio.play()
                }

            },
            changeMS() {//改变音频播放状态

                if (this.$refs.mAudio.paused) {
                    this.$refs.mAudio.play()
                } else {
                    this.$refs.mAudio.pause()
                    this.musicState = false
                }
            },
}

css

    /*音乐播放时的音乐开关旋转效果*/
    .xuan-z-m{
        animation: rotate 3s linear infinite;
    }
    @keyframes rotate{from{transform: rotate(0deg)}
        to{transform: rotate(360deg)}
    }

感谢阅读本文。我也是个前端新手，在此记录一下项目中遇到的问题及解决方式。欢迎高人指点