// ts版-vue
private justPalyOne() {
const audios = document.querySelectorAll("audio");
// 暂停函数
const pauseAll = (exclude: any): any => {
audios.forEach((audio, index) => {
if (exclude !== index) {
audio.pause();
}
});
};
audios.forEach((audio, index) => {
audio.addEventListener("play", ()=>{pauseAll(index)});
});
}
// 普通js版
const justPalyOne = () => {
const audios = document.querySelectorAll("audio");
// 暂停函数
const pauseAll = (exclude)=> {
audios.forEach((audio, index) => {
if (exclude !== index) {
audio.pause();
}
});
};
audios.forEach((audio, index) => {
audio.addEventListener("play", ()=>{pauseAll(index)});
});
}

页面上多个audio只播放一个的更多相关文章

  1. 用WebClient在异步下载或上传时每次只进行一个任务 C#

    当在每次上传或者下载的时候,我只想进行一个任务的,我用的是WebClient类,但是我又不想用同步的方法UploadFile.DownloadFile,因为WebClient这个类的同步方法没有Upl ...

  2. select选择框中,model传的值并非是页面上的值,而是另一个值

    对于编程来说,money和rebate代表的是金额优惠和折扣优惠,采用money或rebate便于数据存储.但是页面显示给用户的时候是金额优惠和折扣优惠,并不是显示编程中所存储数据.所以选择的mode ...

  3. Jquery实现页面上所有的checkbox只能选中一个

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  4. python3 操作页面上各种元素的方法

    (1)       控制浏览器 ①控制浏览器窗口大小set_window_size(宽,高) 打开浏览器全屏maximize_window() ②控制浏览器后退back().前进forward() ③ ...

  5. js禁用页面上右键菜单、选中和复制

    有时候我们不想页面上的内容被人复制走,那么就可以使用js对页面进行设置,禁止右键菜单.禁止选中.禁止复制等功能可以有效的达到这个效果,js代码如下所示: /** * 禁用右键菜单 */ documen ...

  6. 微信小程序 - 为何setData到页面上有的加分号

    Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { let _page = t ...

  7. JavaScript一个页面中有多个audio标签,其中一个播放结束后自动播放下一个,audio连续播放

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 用<audio>标签打造一个属于自己的HTML5音乐播放器

    上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如 ...

  9. Discuz常见小问题2-如何在新建的页面上只显示一部分板块

    切换到论坛-版块管理,记住要只显示的板块的gid(比如我的是36)   为某个主导航设置一个单独的php页面(名字自己取)   如果这个页面内容跟首页forum.php完全一样,只是第三行增加了一句话 ...

  10. 探究 | 如何捕获一个Activity页面上所有的点击行为

    前言 最近逛wanAndroid论坛,发现一个有趣的问题:如何捕获一个Activity页面上所有的点击行为. 一起研究下吧,不想看源码的小伙伴可以直接看文末总结- 准备工作 先得罗列出页面上的一些点击 ...

随机推荐

  1. 创建bean对象的三种方式

    一.使用无参构造方法创建 二.使用静态工厂创建 三.使用实例工厂创建

  2. VMware平台的Ubuntu部署完全分布式Hadoop环境

    前言: 此文章是本人初次部署Hadoop的过程记录以及所遇到的问题解决,这篇文章只有实际操作部分,没有理论部分.因本人水平有限,本文难免存在不足的地方,如果您有建议,欢迎留言或私信告知于我,非常感谢. ...

  3. gRPC与RPC的差异

    在微服务架构日益流行的今天,远程过程调用(RPC)技术成为连接各个服务的重要桥梁.本文将详细比较传统RPC与谷歌开发的gRPC框架,通过具体示例展示它们在请求处理.数据格式.性能等方面的差异. 基本概 ...

  4. 什么情况下会触发 Java 的 Full GC?

    什么情况下会触发 Java 的 Full GC? Full GC(完全垃圾回收)是 Java 中的一个重要垃圾回收阶段,它会回收 整个堆内存,包括 新生代 和 老年代.触发 Full GC 的条件通常 ...

  5. 一个清除数组的方法在 Kotlin、Java、C#和Nim上的性能测试

    起因 我的一个项目使用 Kotlin 编写,他是一个多维数据库应用程序,所以会非常频繁的操作 int 数组,其中有段程序就需要进行 几亿次的数组清除动作,类似这样的代码: Arrays.fill(ta ...

  6. Windows 实用工具(新机、全新系统、重装系统必备)

    Windows 实用工具 https://www.lanzoub.com/b0ziu7owh 密码:akoc HEU_KMS_Activator Windows 激活工具. 下载链接: Github: ...

  7. 国内首个「混合推理模型」Qwen3深夜开源,盘点它的N种对接方式!

    今日凌晨,通义千问团队正式开源了 Qwen3 大模型,并且一口气发布了 8 个型号,其中包括 0.6B.1.7B.4B.8B.14B.32B 以及 30B-A3B 和 235B-A22B,使用者可以根 ...

  8. 4G模块——大夏龙雀DX-CT511-A使用记录

    4G模块--大夏龙雀DX-CT511-A使用记录 加回车换行 115200波特率 重启: AT+RESET 6.关闭HTTP服务: AT$HTTPCLOSE 关闭网路 AT+NETCLOSE 1.TC ...

  9. MCP 实践系列:看热点、蹭热点,创作与摸鱼两手抓!

    连续工作累死人,身心疲惫时,总得有那么一点时间给自己松口气.每当这个时候,我总喜欢偷偷摸摸地看看新闻,整理一下逐渐疯狂的思维.毕竟,谁说程序员就只能埋头写代码?谁规定了只能死磕在堆积如山的bug中? ...

  10. Flutter视频压缩技术:如何在应用中优化视频文件的质量和大小?

    @charset "UTF-8"; .markdown-body { line-height: 1.75; font-weight: 400; font-size: 15px; o ...