由于浏览器限制的原因，不允许自动播放audio音频，尝试网上的方法后也没有进展（如果有解决方法，欢迎评论~）

一、首先创建audio标签

<audio class="g-back-music" src="" ref="backMusicRef" loop preload hidden autoplay></audio>

二、因为在页面刷新后需要先执行动画，动画完成后才去播放音乐，所以在执行mounted函数时，先加载音乐源

mounted() {if(this.sGetCurrentMusicSrc) {// 存在背景音乐，加载音乐源this.$refs.backMusicRef.src = this.sGetCurrentMusicSrc;}}

三、在动画完成后，进行背景音乐的初始化

1.执行audio标签的play方法（目前来看安卓自带浏览器是支持自动播放的）

2.微信浏览器的处理（如果不加，IOS微信端就不支持自动播放了）

3.增加事件监听（PC端click事件、手机端touchstart事件）

4.变量说明：bIsMusicPlay（控制音乐是否播放）

// 初始化音乐fnMusicInit() {this.$refs.backMusicRef.play().then(() => {this.bIsMusicPlay = true;}).catch(()=> {this.bIsMusicPlay = false;})if(navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger") {// 微信浏览器WeixinJSBridge.invoke('getNetworkType', {}, ()=> {this.$refs.backMusicRef.play().then(()=> {this.bIsMusicPlay = true;}).catch(()=> {this.bIsMusicPlay = false;})});}let fnPlay = (event)=> {let className = event.target.className;if(typeof className === 'object' || typeof className === 'string' && !className.includes('g-music')) {// 点击非音乐开关按钮，播放音乐this.$refs.backMusicRef.play().then(()=> {this.bIsMusicPlay = true;}).catch(()=> {this.bIsMusicPlay = false;})}let type = 'ontouchstart' in document.documentElement ? 'touchstart' :'mousedown';// 最后记得移除监听document.removeEventListener(type, fnPlay);}// 监听用户主动操作if('ontouchstart' in document.documentElement) {document.addEventListener('touchstart', fnPlay)} else {document.addEventListener('mousedown', fnPlay)} }

四、音乐的播放，暂停

fnMusicOpera(type) {if(type === 'play') {// 播放this.$refs.backMusicRef.play().then(()=> {this.bIsMusicPlay = true;}).catch(()=> {this.bIsMusicPlay = false;}) } else {// 暂停this.$refs.backMusicRef.pause();this.bIsMusicPlay = false;}}

提示

替换音乐源后，需要手动暂停音乐，防止在音乐关闭的情况下自动播放

参考链接：/article/2940754d.html