uniapp设置背景音乐

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天

1、需求，一款盲盒开箱类项目，需要配有欢快的音乐。适用于任何需要背景音乐的项目

2、配置，在项目列表存放js的文件中新建music.js,内容如下：

const bgm = uni.createInnerAudioContext(); //uni创建一个播放器
bgm.src = 'https://vod.qiniu.ayousi.cn/lq5Af14ZKVj3MmzcFFmcX0qlF7Yx'
bgm.loop = true;

var music = {
    //mute 表示是否是静音，，默认不静音
    playBgm({mute=false}){
        if (!bgm) return;
        if(mute){
            bgm.pause() //关闭
        }else{
            bgm.play() //开启
        }
        
        bgm.onPause(()=>{
            console.log('暂停背景音乐');
        })
        bgm.onPlay(() => {
            console.log('开始播放音乐#######');
        })
        bgm.onError((res) => {
            console.log(res)
        })
    }
}
module.exports = music

3、引入 main.js中

//引入音乐文件 import music from '@/utils/music.js' // 挂载到vue实例上 Vue.prototype.$music =music

4、使用 ，本项目配合了switch开关

      //关闭或开启 音乐
      if (e) {
        // 关闭 静音
        this.$music.playBgm({ mute: false });
      } else {
        this.$music.playBgm({ mute: true });
        // 开启静音
      }
    },

5、遇到的问题

1、安卓后台运行的时候音乐不停止

2、switch开关与音乐的播放、停止不匹配

解决： 在app.vue 中控制

onLaunch: function() {
            console.log('App Launch')
            //主要代码

    // 播放背景音乐
    this.$music.playBgm({mute:false})

    },
    onShow: function() {
            console.log('App show')
            this.$music.playBgm({mute:false})
    },
    onHide: function() {
            console.log('App Hide')
            this.$music.playBgm({mute:true})
    }

这就引出了第二个问题，你关了音乐退出去，在进入音乐是停的，但是switch是开的

解决，在控制开关的页面 onshow中判断一下开关

 onShow() {
	  if(this.checked2){
		  // console.log('播放')
	  }else{
		 // console.log('停止') 
		 this.$music.playBgm({mute:true})
	  }
   }

最后有一个uniapp很久没有解决的bug，在用户反复关闭打开音乐开关是，会遇到没有声音，或者卡顿的问题，根据大佬们的解释说是uniapp创建了音频之后，销毁api没有完全销毁，以至于创建了很多音频，初步解决办法就是在每次音频结束的时候强制结束销毁一下，再play打开