最近需要一个功能 是在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. 武装你的WEBAPI-ODATA聚合查询

    本文属于OData系列 目录 武装你的WEBAPI-OData入门 武装你的WEBAPI-OData便捷查询 武装你的WEBAPI-OData分页查询 武装你的WEBAPI-OData资源更新Delt ...

  2. 看我如何用定值 Cookie 实现反爬

    摘要:本次案例,用定值Cookie实现反爬. 本文分享自华为云社区<我是怎么用一个特殊Cookie,限制住别人的爬虫的>,作者: 梦想橡皮擦 . Cookie 生成 由于本案例需要用到一个 ...

  3. Flask快速入门day02(1、CBV使用及源码分析,2、模板用法,3、请求与响应的基本用法,4、session的使用及源码分析,5、闪现,6、请求扩展)

    目录 Flask框架 一.CBV分析 1.CBV编写视图类方法 二.CBV源码分析 1.CBV源码问题 2.补充问题 3.总结 三.模板 1.py文件 2.html页面 四.请求与响应 1.reque ...

  4. 常用脚本学习手册——Bat脚本

    常用脚本学习手册--Bat脚本 我们在日常工作中常常会遇到一些需要重复进行的工作,又或者我们的项目在转交客户时需要去简化配置过程 这时我们就需要使用到一些自动化部署操作,我们常常会采用脚本来完成这部分 ...

  5. day120:MoFang:修复宠物喂食饱食度不增加的BUG&修复宠物死亡导致数据错乱的BUG

    目录 BUG1:修复宠物喂食饱食度未增加的BUG BUG2:修复当用户拥有2个宠物时,如果第1个宠物挂了,会出现第二个宠物变成第1个宠物的情况,会导致数据发生混乱出现bug BUG1:修复宠物喂食饱食 ...

  6. day29:计算机网络概念

    目录 1.网络开发的两大架构 2.网络概念 3.OSI七层模型 4.ARP协议 5.TCP三次握手和四次挥手 1.网络开发的两大架构 1.没有网络的时候,文件是如何传输的? 早期没有网络 a.py - ...

  7. 当 Amazon Lambda 遇上 Apache APISIX 可以擦出什么火花?

    本文首先介绍了什么是 Serverless,以及为什么需要 Serverless:其次,讲述了一个好的网关在 Serverless 架构下的重要性,而 APISIX 就是这样的一个网关:最后,本文重点 ...

  8. 【LeetCode动态规划#12】详解买卖股票I~IV,经典dp题型

    买卖股票的最佳时机 力扣题目链接(opens new window) 给定一个数组 prices ,它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格. 你只能选择 某一天 买入 ...

  9. 如何将 Spire.Doc for C++ 集成到 C++ 程序中

    Spire.Doc for C++是一个专业的 Word 库,供开发人员在任何类型的 C++ 应用程序中阅读.创建.编辑.比较和转换 Word 文档. 本文演示了如何以两种不同的方式将 Spire.D ...

  10. 前端 引用svg图片,支持动态切换颜色

    当我们添加一张svg图片显示时,react提示找不到文件. 我们可以在全局文件global.d.ts内,添加图片类型的声明: 详见<TypeScript 引用资源文件后提示找不到的错误处理方案& ...