当前位置: 首页 > news >正文

监听其他音频播放时暂停正在播放的音频

要实现当有其他音频播放时暂停当前音频,你可以使用全局事件总线或 Vuex 来管理音频播放状态。这里我将展示如何使用一个简单的事件总线来实现这个功能。

首先,你需要创建一个事件总线。你可以在项目的一个公共文件中创建它,例如 eventBus.js :

import Vue from 'vue';
export const EventBus = new Vue();

然后,在你的组件中使用这个事件总线来监听和触发音频播放事件:

<script>
import { EventBus } from '../../../../eventBus' // 引入事件总线export default {name: 'TrialListening',mixins: [rendererMixin],data() {return {playStateIcon: ['play-icon', 'pause-icon', 'loading-icon'],playState: 0,audioInstance: null,    }},methods: {/*** 播放音频* @param {String} url - 音频的URL*/playAudio(url) {this.playState = 2; // 设置为加载中状态const audio = new Audio(url);// 触发全局事件,通知其他音频暂停EventBus.$emit('pauseAllAudio');audio.play().then(() => {this.playState = 1; // 设置为播放状态}).catch(error => {console.error('音频播放失败:', error);this.playState = 0; // 恢复为初始状态});// 监听音频播放结束事件audio.addEventListener('ended', () => {this.playState = 0; // 恢复为初始状态});this.audioInstance = audio;// 监听全局暂停事件EventBus.$on('pauseAllAudio', this.pauseAudio);},/*** 暂停音频*/pauseAudio() {if (this.audioInstance) {this.audioInstance.pause();this.playState = 0; // 设置为暂停状态}}},beforeDestroy() {// 组件销毁前移除事件监听EventBus.$off('pauseAllAudio', this.pauseAudio);}
}
</script>

说明

  • 事件总线 :使用 EventBus 来在组件之间传递事件。
  • playAudio 方法 :在播放音频时触发 pauseAllAudio 事件,通知其他组件暂停音频。
  • pauseAudio 方法 :暂停当前音频。
  • 事件监听 :在组件销毁前移除事件监听,以防止内存泄漏。

相关文章:

监听其他音频播放时暂停正在播放的音频

要实现当有其他音频播放时暂停当前音频&#xff0c;你可以使用全局事件总线或 Vuex 来管理音频播放状态。这里我将展示如何使用一个简单的事件总线来实现这个功能。 首先&#xff0c;你需要创建一个事件总线。你可以在项目的一个公共文件中创建它&#xff0c;例如 eventBus.js…...

小熊猫C++安装EasyX最新教程

1.下载EasyX 官网下载&#xff1a; EasyX 官网https://easyx.cn/ 2.将下载文件改格式解压 注意&#xff1a;下载文件为.exe格式&#xff0c;需将其格式改成.zip格式&#xff01; 如何改格式&#xff1f; a.若文件名字未显示.exe (1).打开此电脑 (2).点击上端的查看 (…...

安装VM和Centos

安装VM 一、打开虚拟机 二、选择典型 三、选择光盘 四、指定虚拟机位置 五、设置磁盘大小并拆分为多个文件 六、完成 安装Centos 一、上述过程完成后我们直接打开虚拟机 二、语言选择中文 三、默认安装位置并点击完成 四、点击开始安装 五、点击设置密码 设置完密码后点击完成…...

git 命令 设置别名

在Git中&#xff0c;您可以通过以下命令查看所有的alias&#xff08;别名&#xff09;&#xff1a; git config --get-regexp alias 这个命令会列出所有配置的alias&#xff0c;例如&#xff1a; alias.st.status alias.co.checkout alias.br.branch ... 如果您想查看某个特定a…...

React + TypeScript 全栈开发最佳实践

React TypeScript 全栈开发最佳实践 一、环境搭建与项目初始化 node.js和npm的安装请参考我的文章。 1.1 脚手架选择与工程创建 # 使用Vite 5.x创建ReactTS项目&#xff08;2025年主流方案&#xff09; npx create-vitelatest my-app --template react-ts cd my-app npm in…...

springboot志同道合交友网站设计与实现(代码+数据库+LW)

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本志同道合交友网站就是在这样的大环境下诞生&#xff0c;其可以帮助使用者在短时间内处理完毕庞大的数据信…...

防火墙双机热备---VRRP,VGMP,HRP(超详细)

双机热备技术-----VRRP&#xff0c;VGMP&#xff0c;HRP三个组成 注&#xff1a;与路由器VRRP有所不同&#xff0c;路由器是通过控制开销值控制数据包流通方向 防火墙双机热备&#xff1a; 1.主备备份模式 双机热备最大的特点就是防火墙提供了一条专门的备份通道&#xff08;心…...

MQTT实现智能家居------4、在Linux上运行MQTT

进入主目录&#xff0c;创建一个MQTT文件夹 cd ~ mkdir MQTT 用FileZilla连接开发板&#xff0c;将我发布的压缩包解压以后放进MQTT 安装cmake sudo apt-get install cmake g编译 & 运行 echo sudo apt-get update >> build.sh #向build.sh文件写入内容 chmod…...

VMware建立linux虚拟机

本文适用于初学者&#xff0c;帮助初学者学习如何创建虚拟机&#xff0c;了解在创建过程中各个选项的含义。 环境如下&#xff1a; CentOS版本&#xff1a; CentOS 7.9&#xff08;2009&#xff09; 软件&#xff1a; VMware Workstation 17 Pro 17.5.0 build-22583795 1.配…...

大模型文集开篇稿

2023年&#xff0c;我国AI大模型行业规模已达到147亿元人民币&#xff08;前瞻产业研究院 数据&#xff09;。AI大模型的行业应用及技术进步能有效提升各行业生产要素的产出效率并提高了数据要素在生产要素组合中的地位。供给方面&#xff0c;当前AI大模型企业主要通过深化通用…...

python pickle模块

pickle 是 Python 的一个标准模块&#xff0c;它实现了基本的二进制协议&#xff0c;用于对象的序列化和反序列化。序列化是指将对象转换为字节流的过程&#xff0c;这样对象就可以被保存到文件中或通过网络传输。反序列化是指将字节流转换回对象的过程。 使用 pickle 序列化对…...

第16届蓝桥杯模拟赛3 python组个人题解

第16届蓝桥杯模拟赛3 python组 思路和答案不保证正确 1.填空 如果一个数 p 是个质数&#xff0c;同时又是整数 a 的约数&#xff0c;则 p 称为 a 的一个质因数。 请问&#xff0c; 2024 的最大的质因数是多少&#xff1f; 因为是填空题&#xff0c;所以直接枚举2023~2 &am…...

企业知识管理战略整合新路径

跨部门知识协同机制 现代企业知识管理的核心挑战在于突破组织孤岛效应&#xff0c;跨部门知识协同机制的构建需依托结构化流程与智能化工具的融合。通过建立标准化知识元数据体系&#xff0c;企业可实现文档分类、版本控制及权限管理的统一规范&#xff0c;其中Baklib作为云端…...

GO 快速升级Go版本

由于底层依赖升级了&#xff0c;那我们也要跟着升&#xff0c;go老版本已经不足满足需求了&#xff0c;必须要将版本升级到1.22.0以上 查看当前Go版本 命令查看go版本 go version [rootlocalhost local]# go version go version go1.21.4 linux/amd64 [rootlocalhost local]# …...

RBAC授权

4 RBAC授权 4.1 什么是RBAC 在Kubernetes中&#xff0c;所有资源对象都是通过API进行操作&#xff0c;他们保存在etcd里。而对etcd的操作我们需要通过访问kube-apiserver来实现&#xff0c;上面的Service Account其实就是APIServer的认证过程&#xff0c;而授权的机制是通过RBA…...

搜广推校招面经三十一

vivo策略算法 一、机器学习中 L1 和 L2 正则化的原理 见【搜广推校招面经二十五】 L1 正则化将某些特征权重置0实现模型简化&#xff0c;而 L2 正则化主要通过平滑权重来实现模型简化。 1.1. 正则化的原理 正则化的核心思想是在损失函数中加入一个惩罚项&#xff08;Regula…...

【JavaWeb13】了解ES6的核心特性,对于提高JavaScript编程效率有哪些潜在影响?

文章目录 &#x1f30d;一. ES6 新特性❄️1. ES6 基本介绍❄️2. 基本使用2.1 let 声明变量2.2 const 声明常量/只读变量2.3 解构赋值2.4 模板字符串2.5 对象拓展运算符2.6 箭头函数 &#x1f30d;二. Promise❄️1. 基本使用❄️2. 如何解决回调地狱问题2.1回调地狱问题2.2 使…...

C++知识整理day9——继承(基类与派生类之间的转换、派生类的默认成员函数、多继承问题)

文章目录 1.继承的概念和定义2.基类与派生类之间的转换3.继承中的作用域4.派生类的默认成员函数5.实现一个不能被继承的类6.继承与友元7.继承与静态成员8.多继承和菱形继承问题8.1 继承分类及菱形继承8.2 虚继承 1.继承的概念和定义 概念&#xff1a; 继承(inheritance)机制是⾯…...

pyautogui库的screenshot()函数

# 方法一 screenshot pyautogui.screenshot() screenshot.save("screenshot.png")# 方法二 # 获取屏幕分辨率 screen_width, screen_height pyautogui.size()# 截取桌面屏幕 screenshot pyautogui.screenshot(region(0, 0, screen_width, screen_height)) screens…...

App测试--逍遥模拟器抓包问题

一、环境 逍遥模拟器、burp、adb、openssl(kali)。 二、配置 1.burp证书转换 下载证书 将burp证书复制进kali&#xff0c;使用kali的openssl(自带)&#xff0c;执行以下命令。 openssl x509 -inform der -in cacert.der -out burp.pem openssl x509 -subject_hash_old -in…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

大数据学习(132)-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...