最近需要一个功能 是在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 全局背景音乐播放+暂停(跳转页面不暂停)的更多相关文章

  1. 31.JS实现控制HTML5背景音乐播放暂停

    实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的,仅仅几行代码即可实现.首先在网页中嵌入背景音乐,html5代码为: <script src="http://wuover ...

  2. Cocos2d-x中背景音乐播放暂停与继续

    背景音乐播放暂停与继续似乎我们很少使用,事实上也正是如此,背景音乐播放暂停与继续实例代码如下: SimpleAudioEngine::getInstance()->pauseBackground ...

  3. uni-app生命周期和路由跳转

    生命周期分为:应用生命周期和页面生命周期 具体内容可参考:uni-app官网Api 应用生命周期(仅可在App.vue中监听) (1)onLaunch:当uni-app 初始化完成时触发(全局之触发一 ...

  4. Webform Session、Cookies传值,跳转页面方式

    Session:每个独立的浏览器都会创建一个独立的Session,不是一台电脑一个Session 存放位置:服务器上 作用:只要里面有内容,那么这个网站中所有的C#端都能访问到这个变量 优点:安全,速 ...

  5. iOS极光推送 点击推送消息跳转页面

    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launc ...

  6. Form_通过Zoom客制化跳转页面功能(案例)

    2012-09-08 Created By BaoXinjian

  7. vue-router跳转页面

    小结放在前:先祝大家新年快乐!鸡年大吉大利!在新的一年里大家都有跳跃般的成长!作为新年的第一篇文章,就拿他来给大家拜个年!!!文章前部份讲解了vue-router路由的配置,后半部分为去年的文章vue ...

  8. Vue 编程之路(二)——跳转页面传值

    最近公司的一个项目中使用 Vue 2.0 + element UI 实现一个后台管理系统的前端部分,属于商城类型.其中我负责的部分有一项需要跳转页面,由于跳转前的页面是多个组件构成的,所以在跳转页面的 ...

  9. POS开发问题 - 跳转页面更新,返回还原旧数据

    问题描述:由于需求的需要,路由需要加上缓存 <keep-alive> ,还要实现跳转就初始化,返回就还原的需求.意思就是:页面 A 跳转到页面 B ,页面 B 要初始化数据,但是 页面 B ...

  10. android游戏开发系列(2)——背景音乐播放技术

    背景音乐通常播放时间较长,且文件体积也相对较大.这类资源如果放在内存中,一方面给硬件资源本身就很紧缺的手机造成了负担,另一方面通常也没有这方面的需求,放在内存中,在调用时播放速度较快,而长时音乐文件通 ...

随机推荐

  1. Cannot read properties of undefined (reading 'toUpperCase')

    无法读取 JS 中未定义的属性"toUpperCase"|鲍比哈兹 (bobbyhadz.com) 根据其中的内容找到了答案:使用了未定义的属性去使用toUpperCase()函数 ...

  2. 剑指 offer 第 28 天

    第 28 天 搜索与回溯算法(困难) 剑指 Offer 37. 序列化二叉树 请实现两个函数,分别用来序列化和反序列化二叉树. 你需要设计一个算法来实现二叉树的序列化与反序列化.这里不限定你的序列 / ...

  3. 机器学习系列入门系列[七]:基于英雄联盟数据集的LightGBM的分类预测

    1. 机器学习系列入门系列[七]:基于英雄联盟数据集的LightGBM的分类预测 1.1 LightGBM原理简介 LightGBM是2017年由微软推出的可扩展机器学习系统,是微软旗下DMKT的一个 ...

  4. PyQt5学习 (1)--对象的基本操作、QObject

    参考视频:[Python-GUI编程-PyQt5 (少)] https://www.bilibili.com/video/BV17J41177ro/?share_source=copy_web& ...

  5. Install Ansible on CentOS 8

    环境准备: 1.至少俩台linux主机,一台是控制节点,一台是受控节点 2.控制节点和受控节点都需要安装Python36 3.控制节点需要安装ansible 4.控制节点需要获得受控节点的普通用户或r ...

  6. Springboot集成MyBatis进行开发

    引入相关的依赖 <dependency> <groupId>junit</groupId> <artifactId>junit</artifact ...

  7. .NET无侵入自动化探针原理和主流实现

    前言 最近,我在微信公众号和博客园分享了一篇关于.NET微服务系统迁移至.NET 6.0的故事的文章,引起了许多读者的关注.其中,许多人对基于 OpenTelemetry .NET 的观测指标和无侵入 ...

  8. C#写一套最全的MySQL帮助类(包括增删改查)

    介绍说明:这个帮助类包含了六个主要的方法:ExecuteNonQuery.ExecuteScalar.ExecuteQuery.ExecuteQuery(泛型).Insert.Update和Delet ...

  9. vue移动端预览 pdf 文件

    pdf预览,在项目中是很常见的需求,在PC端web项目中,我们可以使用window.open(url)直接打开pdf进行预览,那么移动端虽然我们也可以使用此方法,但是这是新开了一个webview页面, ...

  10. 关于在 springboot 中使用 @Autowired 注解来对 TemplateEngine 进行自动装配时,无法注入的问题。

    前言 本文是基于江南一点雨的 Spring Boot+Vue 系列视频教程第 三 章的第三节,详情参考Spring Boot+Vue系列视频教程 在观看学习这一节时,发现当进行手动渲染 Thymele ...