audio在使用中,如果有多个,在播放的时候,如果一个声音没有播放完继续下一个的话,原来正在播放的并不会关闭(在Android和PC上测试是这样,苹果产品不清楚)

现在需要做的是,当播放其中一个的时候,其他正在播放的全部关闭

实现思路:先获取当前HTML中所有的audio作为数组储存,当你指定要播放的audio,根据你所指向的audio的下标,移除该目标 ,数组剩余对象全部用关闭

具体代码如下

//获取Class对象下的所有audio对象
let audios = document.getElementsByClassName('voice')[0].getElementsByTagName('audio'); /**
*@parma audio //audio列表
*@Parma a //当前audio下标
**/
function pauseAll(audioList,a) {
for(let i = 0; i < audioList.length; i++){
if(i !== a-1){
audioList[i].pause();
}
}
}

JS audio播放一个的时候,其他正在播放的关闭的更多相关文章

  1. JavaScript多个音频audio标签,点击其中一个播放时,其他的停止播放

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

  2. Audio 标签的使用和自己封装一个强大的React音乐播放器

    原文地址:https://www.dodoblog.cn/blog?id=5be84d5c70b2b617f27a4610 这篇文章主要介绍一下博客里的这个音乐播放器是怎么写的 为了更好的表达高深的东 ...

  3. js audio 播放音乐

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 【原创】使用JS封装的一个小型游戏引擎及源码分享

    1 /** * @description: 引擎的设计与实现 * @user: xiugang * @time: 2018/10/01 */ /* * V1.0: 引擎实现的基本模块思路 * 1.创建 ...

  5. iOS Dev (20) 用 AVAudioPlayer 播放一个本地音频文件

    iOS Dev (20) 用 AVAudioPlayer 播放一个本地音频文件 作者:CSDN 大锐哥 博客:http://blog.csdn.net/prevention 步骤 第一步:在 Proj ...

  6. iOS Dev (21) 用 AVPlayer 播放一个本地音频文件

    iOS Dev (21) 用 AVPlayer 播放一个本地音频文件 作者:CSDN 大锐哥 博客:http://blog.csdn.net/prevention 前言 这篇文章与上一篇极其相似,要注 ...

  7. 解决audio和video在手机端无法自动播放问题

    各大浏览器都为了节省流量,做出了优化,在用户没有行为动作时(交互)不予许自动播放 <audio src="music/bg.mp3" autoplay loop contro ...

  8. 解决html5 audio iphone,ipd,safari不能自动播放问题

    html audio 在iPhone,ipd,safari浏览器不能播放是有原因滴 (在safri on ios里面明确指出等待用户的交互动作后才能播放media,也就是说如果你没有得到用户的acti ...

  9. 用原生js来写一个swiper滑块插件

        是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...

随机推荐

  1. PIL实现图片框架以及生成图片验证码

    1. PIL的基本概念 PIL:即Python Imaging Library,是Python平台事实上的图像处理标准库. PIL中涉及通道(bands)和模式(mode)这两个重要概念. (1)通道 ...

  2. Spring中单例模式中的饿汉和懒汉以及Spring中的多例模式

    链接:https://pan.baidu.com/s/1wgxnXnGbPdK1YaZvhO7PDQ 提取码:opjr 单例模式:每个bean定义只生成一个对象实例,每次getBean请求获得的都是此 ...

  3. 多线程14-Barrier

    , b => Console.WriteLine());         ; i <= ; i++)             {                 Console.Write ...

  4. iview报错[Vue warn]: Error in render: "TypeError: ctx.injections.tableRoot.$scopedSlots[ctx.props.column.slot] is not a function"

    原因是我使用了iview的<Table>组件,我给Table组件的columns中定义了4个含有slot的列,但是实际在<Table>中只使用了其中3个,导致的报错. 也就是说 ...

  5. SparkStreaming DStream转换

    1.无状态转换操作 (1)无状态转化操作就是把简单的RDD转化操作应用到每个批次上,也就是转换DStream中的每一个RDD. 部分无状态转化操作: (2)尽管这些函数韩起来像作用在整个流上一样,但事 ...

  6. Yii2.0 limit(1)与one()

    ActiveRecord中的limit(1)与one()的区别 (new \yii\db\Query())->from('user')->limit(1)->one() public ...

  7. 洛谷 - P3803 -【模板】多项式乘法(FFT) - NTT

    https://www.luogu.org/problemnew/show/P3803 看别人偏偏就是要用NTT去过.实验证明大概是这样用.求0~n的多项式和0~m的多项式的乘积.注意MAXN取值.A ...

  8. django事务模式

    from django.db import transaction from django.db import transaction with transaction.atomic(): obj = ...

  9. k3 cloud付款单提示余额不足,科目余额表中余额为正,银行存款流水账中未负数

    对比科目余额表中的科目明细账和银行存款流水账,发现科目余额表不全,这说明有部分凭证没做,付款的时候验证的主要以银行流水账为主(主要来自现金流量表),这时候需要调整出纳部分和总账部分

  10. ssm中web配置各框架的配置文件路径方式

    一.在web文件中配置 使用逗号隔开 二.在applicationContext.xml文件中配置或引用 以下是引用方式 注: <import />标签要放在所有bean配置的最前面.