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

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

单独建了一个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})
                }
            },
       }