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. 应用安全 - Web框架 - 数据库管理 - phpMyAdmin - 漏洞汇总

    CVE-2019-18622 Date: 2019.10.28 类型: SQL injection in Designer feature 影响范围: phpMyAdmin versions prio ...

  2. spring-第N篇整合SSM,即Mybatis+Spring+Spring MVC

    1.Mybatis的配置使用 1>Jar包:mybatis-3.4.5.jar.mysql-connector-6.0.2或者ojdbc6-11.2.0.4.jar. 2>编写conf.x ...

  3. soot学习历程---(1)

    今天看了soot生成手册的部分内容,简单摘录一下 Scene 表示分析所处的完整环境,可以借此设置application class(用sootclass),主类(main),point-to和cal ...

  4. 跟风Manacher算法整理

    这是上上周天机房一位神仙讲的,\(gu\)了这么久才来整理\(w\),神仙讲的基本思路已经全都忘记了,幸好的是神仙写了\(blog\),吹爆原博浅谈\(Manacher\)算法,以及原博神仙\(ych ...

  5. python中输入某年某月某日,判断这一天是这一年的第几天?

    输入某年某月某日,判断这一天是这一年的第几天?程序分析 特殊情况,闰年时需考虑二月多加一天: 直接上代码 #定义一个函数,判断是否为闰年 def leapyear(y): return (y % 40 ...

  6. TMS320F28335——SPI使用笔记

    一.SPI硬件接口 GPIO54    -------    SPISIMOA GPIO55    -------    SPISOMIA GPIO56    -------    SPCLK GPI ...

  7. 剑指offer-用两个栈实现队列-栈和队列-python

    题目描述 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型.   # -*- coding:utf-8 -*- class Solution: def __init_ ...

  8. j网络爬虫之WebMagic

    WebMagic官网:http://webmagic.io/ 注意: 1.在自定义PageProcessor中使用System.out.println(“str”),Spider.create(new ...

  9. Chrome开发者工具详解(四)之Elements、Console、Sources面板

    Elements面板 实时编辑DOM节点和CSS样式 双击DOM树视图里面的节点,可以实时编辑标签属性,修改的效果会立刻反应在浏览器里 点击右侧Style面板,可以实时修改CSS的属性值,这里面的所有 ...

  10. DRF框架之视图类

    前后端分离的项目 >: pip3 install djangorestframework   一.视图类传递参数给序列化类 视图层:views.py 需求: (1)在视图类中实列化对象是,可以设 ...