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})
}
},
}
uniapp 全局背景音乐播放+暂停(跳转页面不暂停)的更多相关文章
- 31.JS实现控制HTML5背景音乐播放暂停
实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的,仅仅几行代码即可实现.首先在网页中嵌入背景音乐,html5代码为: <script src="http://wuover ...
- Cocos2d-x中背景音乐播放暂停与继续
背景音乐播放暂停与继续似乎我们很少使用,事实上也正是如此,背景音乐播放暂停与继续实例代码如下: SimpleAudioEngine::getInstance()->pauseBackground ...
- uni-app生命周期和路由跳转
生命周期分为:应用生命周期和页面生命周期 具体内容可参考:uni-app官网Api 应用生命周期(仅可在App.vue中监听) (1)onLaunch:当uni-app 初始化完成时触发(全局之触发一 ...
- Webform Session、Cookies传值,跳转页面方式
Session:每个独立的浏览器都会创建一个独立的Session,不是一台电脑一个Session 存放位置:服务器上 作用:只要里面有内容,那么这个网站中所有的C#端都能访问到这个变量 优点:安全,速 ...
- iOS极光推送 点击推送消息跳转页面
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launc ...
- Form_通过Zoom客制化跳转页面功能(案例)
2012-09-08 Created By BaoXinjian
- vue-router跳转页面
小结放在前:先祝大家新年快乐!鸡年大吉大利!在新的一年里大家都有跳跃般的成长!作为新年的第一篇文章,就拿他来给大家拜个年!!!文章前部份讲解了vue-router路由的配置,后半部分为去年的文章vue ...
- Vue 编程之路(二)——跳转页面传值
最近公司的一个项目中使用 Vue 2.0 + element UI 实现一个后台管理系统的前端部分,属于商城类型.其中我负责的部分有一项需要跳转页面,由于跳转前的页面是多个组件构成的,所以在跳转页面的 ...
- POS开发问题 - 跳转页面更新,返回还原旧数据
问题描述:由于需求的需要,路由需要加上缓存 <keep-alive> ,还要实现跳转就初始化,返回就还原的需求.意思就是:页面 A 跳转到页面 B ,页面 B 要初始化数据,但是 页面 B ...
- android游戏开发系列(2)——背景音乐播放技术
背景音乐通常播放时间较长,且文件体积也相对较大.这类资源如果放在内存中,一方面给硬件资源本身就很紧缺的手机造成了负担,另一方面通常也没有这方面的需求,放在内存中,在调用时播放速度较快,而长时音乐文件通 ...
随机推荐
- Condition 接口
系统性学习,移步IT-BLOG Java 对象拥有一组监视方法:wait().wait(long timeout).notify() 以及 notifyAll() 方法,这些方法与 synchroni ...
- LinkedBlockingQueue出入队实现原理
类图概述 由类图可以看出,L是单向链表实现的,有两个ReentrantLock实例用来控制元素入队和出队的原子性,takeLock用来控制只有一个线程可以从队头获取元素,putLock控制只有一个线程 ...
- Midjourney AI绘画使用指南
上图有Midjourney生成,提示语为:24-year-old Chinese woman with long hair and a Tedd Midjourney是一款基于Prompt设计和CL ...
- js面试题学习整理
1. 异步操作有哪些? 回调函数,事件监听,promise,ajax,async,setTimeout,Generator 2. Promise是什么? Promise是异步编程的一种解决方案. 从语 ...
- 你不得不了解的CSS数据类型
在我之前的开发中,CSS对于我来说,要用什么找什么,对CSS的了解并不算深入:在我刚开始深入学习CSS时,第一个遇到的就是CSS数据类型,我听说过JS.TS的数据类型,CSS怎么也有数据类型?但是随着 ...
- 四月二十三号java基础知识
1.异常是指在程序运行中由代码产生的一种错误2.按照错误的性质将错误分为语法错.语义错.和逻辑错三种3.语法错是有由于违反程序设计语言的语言规则而产生的错误,如标识符未标明.表达式中运算符与操作数类型 ...
- LeetCode 周赛 340,质数 / 前缀和 / 极大化最小值 / 最短路 / 平衡二叉树
本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 提问. 大家好,我是小彭. 上周跟大家讲到小彭文章风格的问题,和一些朋友聊过以后,至少在算法题解方面确定了小彭的风格 ...
- ArrayList实现原理和自动扩容
ArrayList在Java集合中的位置, ArrayList原理: transient Object[] elementData; ArrayList通过数组来实现. 默认构造方法会构造一个容量为1 ...
- 前端 引用svg图片,支持动态切换颜色
当我们添加一张svg图片显示时,react提示找不到文件. 我们可以在全局文件global.d.ts内,添加图片类型的声明: 详见<TypeScript 引用资源文件后提示找不到的错误处理方案& ...
- LeetCode 654:最大二叉树
先立个flag吧,坚持每日刷题的小目标,希望自己能坚持下来,如果有需要一起打卡的uu,可以一起监督哈,在菜鸡的路上慢慢变好 题目:最大二叉树 给定一个不重复的整数数组 nums . 最大二叉树 可以用 ...