uniapp 全局背景音乐播放+暂停（跳转页面不暂停）

最近需要一个功能 是在h5中播放小游戏的背景音乐，但是跳转界面之后音乐不暂停，就是跳转多个页面之后，音乐依然在播放，在游戏界面会有设置的静音的按钮，可以开启音乐和关闭音乐。

这相当于全局的背景音乐播放事件，所以肯定是放入到全局的vuex或者是main.js

刚开始是放入main中的，一直测试不行，跳转页面的时候总是会重新加载一下音乐，导致，跳转页面之后会听到两个音乐都在播放，而且，在设置后点击暂停音乐也是不起作用。

后来我放入了vuex中，刚开始是把创建的音频实例放入方法中，点击暂停之后总是不起作用，捣鼓了好久，突然发现，暂停的是同一个音乐实例，所所以不能放入方法中，应该拎出来，放在全局的js 中，果然是成功了。

回头又看看之前放在main中的，也是同样的问题，所以又重新修改之后。main中的方法也是可以用的，

第一种：放入main中。 我是单独建了一个music.js文件，然后引入到main中的 如下：

const bgm = uni.createInnerAudioContext();
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

main.js 中引入music.js文件

import music from @/utils/music.js
// 挂载到vue实例上
Vue.prototype.$music =music

单页面使用

//主要代码
onLoad() {
            // 播放背景音乐
            this.$music.playBgm({mute:false})
        },
       methods:{
       //关闭或开启 音乐 
            musicBtn() {
                this.muteBgMusic = !this.muteBgMusic
                console.log(this.muteBgMusic,this.muteBgMusic?已关闭音乐####:已开启音乐####);      
                if (this.muteBgMusic) {
                    // 开启静音
                    this.$music.playBgm({mute:true})
                } else {
                    // 关闭 静音
                    this.$music.playBgm({mute:false})
                }
            },
       }

第二种方法：