欢迎来到沐沐的博客

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

最近需要一个功能 是在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})
                }
            },
       }
复制代码

 

posted @   前端小二&沐沐  阅读(1598)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
点击右上角即可分享
微信分享提示