// 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. CH9120 TFTP使用详解

    一.TFTP简介: TFTP是基于UDP应用层的简单的文件传输协议,端口号为69,TFTP协议主要应用于网络引导.配置文件传输等场景. 二.报文介绍: TFTP有四种数据包格式,分别是读/写请求包.文 ...

  2. BeanCreationException: Error creating bean with name 'dataSource' defined in class path resource

    在练习中遇到的,我的情况是: 打算在common中建立student实体类,想到可能其他模块也会用到这个类,但是一些注解比如,@TableId等等需要用到mybatis-plus的依赖,所以我就把依赖 ...

  3. 干货分享!MCP 实现原理,小白也能看懂

    不知道大家有没有发现?对于添加到 MCP 服务市场的成千上万个 MCP 服务(而且这个数字每天还在增加),我们可以不写一行代码,轻松实现调用,但背后的原因究竟是啥呢? MCP 虽然用起来很方便,但搞不 ...

  4. 在 ASP.NET Core 中编写高性能 Web API 的4个小技巧

    Web API 通常用来与外部模块进行通信.发送和接收数据,作为后端开发人员,应该把写出高性能的应用作为目标. 下面 4 个技巧是我在编写 Web API 的小技巧. 1 .大量数据使用分页查询 接口 ...

  5. .net6 中间件

    参照资料: ASP.NET Core 中间件 | Microsoft Learn ASP.NET Core端点路由 作用原理 - 知乎 (zhihu.com) 一.概念 中间件是一种装配到应用管道以处 ...

  6. Python3_python2打包exe文件

    最近要把绿盟报告导出脚本打包成一个exe,原本是一个py2的文件Vulreport.py,我做了如下步骤. 1.py2topy3 Python3 2to3.py -w Vulreport.py 2.p ...

  7. 牛!达摩院孵化开源项目,让数字人"活"起来:OpenAvatarChat教你轻松搭建自己的数字人

    嗨,大家好,我是小华同学,关注我们获得"最新.最全.最优质"开源项目和高效工作学习方法 "只需一台普通电脑,就能让数字人像真人一样与你畅聊!" -- OpenA ...

  8. 20K star!让网页设计秒变手绘风,这个开源库太有创意了!

    "Rough.js 是一个轻量级的图形库(仅8KB),能够为网页元素赋予自然的手绘质感.通过独特的算法模拟人类绘画的不规则性,开发者只需几行代码即可为图表.流程图.UI组件等数字内容注入生动 ...

  9. mysql设置时区

    参考:https://blog.csdn.net/vkingnew/article/details/82149726 查看时区 show variables like '%time_zone%'; 设 ...

  10. 【经验】CiteSpace|Wiley Online Library或除知网以外的其他网站的文献怎么导入CiteSpace 6.1.6?

      如果没安装,请看这篇博客安装,现在新版(6.1.6)的不需要额外下载java了,就很妙~:   最新版citespace软件的安装与配置   结论:导出成RIS然后用它自带的转换成WoS. 文章目 ...