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}) } }, }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构