当前位置: 首页 > 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…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

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

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

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...