由于浏览器限制的原因,不允许自动播放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