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)——背景音乐播放技术
背景音乐通常播放时间较长,且文件体积也相对较大.这类资源如果放在内存中,一方面给硬件资源本身就很紧缺的手机造成了负担,另一方面通常也没有这方面的需求,放在内存中,在调用时播放速度较快,而长时音乐文件通 ...
随机推荐
- Java面试——专业技能
目录 一.简单讲下 Java 的跨平台原理 二.装箱与拆箱 三.实现一个拷贝文件的工具类使用字节流还是字符流 四.介绍下线程池 五.JSP和 Servlet 有哪些相同点和不同点 六.简单介绍一下关系 ...
- VirtualBox下宿主机和Linux虚拟机共享文件配置方法
VirtualBox版本-5.2.8 Linux版本-Ubuntu16.04 2020.03.31 一.首先在宿主机上新建一个文件夹,这里命名为共享文件夹(如果读者自行命名记得后文全部替换),存放了一 ...
- 面向Web开发人员的Linux实用入门
从 web 开发的视角说一下在使用 Linux 时遇到的问题,主要是针对操作本身,因为指令在网上都可以查到,不会深入原理,但尽量实用. 基础认知 为什么使用 Linux 最初我使用 Linux 是因为 ...
- 使用 SK 示例 探索 GitHub 存储库 中的机器人
微软 3月22日 一篇文章"Semantic-kernel 嵌入和记忆:使用聊天UI探索GitHub Repos"[1] ,文章中进行了展示了嵌入,该文章解释了他们如何帮助开发人员 ...
- [MYSQL/JDBC]mysql-connector-java与MySQL、JDK对应的兼容版本[转载]
1 文由 MYSQL 数据库版本 与 驱动版本之间的兼容性,可能会涉及到 部分数据库特性(函数.语法)等是否能够正常使用的问题. 2 兼容性: mysql-connector-java VS Mysq ...
- 逍遥自在学C语言 位运算符 "|" 的5种高级用法
前言 在上一篇文章中,我们介绍了&运算符的高级用法,本篇文章,我们将介绍| 运算符的一些高级用法. 一.人物简介 第一位闪亮登场,有请今后会一直教我们C语言的老师 -- 自在. 第二位上场的是 ...
- ubuntu容器的远程xface桌面环境搭建
一.container: ubuntu20.04 二.commands: apt install xfce4 tigervnc-standalone-server # xface使用gdm3启动器 ...
- 安装Zookeeper和Kafka集群
安装Zookeeper和Kafka集群 本文介绍如何安装Zookeeper和Kafka集群.为了方便,介绍的是在一台服务器上的安装,实际应该安装在多台服务器上,但步骤是一样的. 安装Zookeeper ...
- 面向接口编程实践之aspnetcoreapi的抽象
最为一名越过菜鸟之后的开发,需要做接口开发.下面做一个纯粹的接口编程的实例demo,仅仅是一个webapi接口的抽象. 下面是代码接口,AbsEFWork是webapi,BaseEntityFrame ...
- SpringBoot自动装配原理剖析(自己理解,有错请指出)
注解 主类 @SpringBootApplication @EnableAutoConfiguration @Import({AutoConfigurationImportSelector.class ...