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. python每日一练:0005题

    第 0005 题: 你有一个目录,装了很多照片,把它们的尺寸变成都不大于 iPhone5 分辨率的大小. import cv2 import os def resize(path,sizeX,size ...

  2. 【Qt开发】【VS开发】【Linux开发】OpenCV、Qt-MinGw、Qt-msvc、VS2010、VS2015、Ubuntu Linux、ARM Linux中几个特别容易混淆的内容

    [Qt开发][VS开发][Linux开发]OpenCV.Qt-MinGw.Qt-msvc.VS2010.VS2015.Ubuntu Linux.ARM Linux中几个特别容易混淆的内容 标签:[Qt ...

  3. 【Linux开发】【Qt开发】ARM QT移植详细步骤教程

    ARM QT移植详细步骤教程 米尔SAM9X5和A5D3X上默认的Qt版本是4.5.3,当这个版本的Qt库不能满足实际开发需求时,可通过此方法制定Qt开发.运行环境. 移植的步骤如下: 1.下载新版q ...

  4. 20191127 Spring Boot官方文档学习(4.12)

    4.12.缓存(Caching) Spring框架提供了对应用程序透明添加缓存的支持.从本质上讲,抽象将缓存应用于方法,从而根据缓存中可用的信息减少执行次数.缓存逻辑是透明应用的,不会对调用者造成任何 ...

  5. 关于连接池和DBUtils

    1.关于数据库连接池 连接池就是创建和管理一个连接缓冲池的技术,这些连接好被任意线程所使用,数据库连接池负责分配和管理.释放数据库连接,总而言之数据库连接池就是提高对数据库的操作性能. 数据库连接池: ...

  6. 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个,导致的报错. 也就是说 ...

  7. C++类中的函数重载

    1,本课程最初阶段就学习了函数重载,但是那时研究目标仅限于全局函数,到目前 为止我们学习了三种函数: 1,全局函数: 2,普通成员函数: 3,静态成员函数: 这三种不同类型的函数之间是否可以构成重载, ...

  8. 安装Pycharm(方便编辑代码的IDE(编辑器))以及 使用Pycharm新建项目

    安装Pycharm(方便编辑代码的IDE(编辑器))以及 使用Pycharm新建项目 一.下载安装Pycharm 首先要下载Pycharm这个软件,官网的下载地址是: http://www.jetbr ...

  9. RMQ 模板

    RMQ(Range Minimum/Maximum Query),即区间最值查询,是指这样一个问题:对于长度为 n的数列A,回答若干次询问RMQ(i,j),返回数列A中下标在区间[i,j]中的最小/大 ...

  10. 剑指offer 打印从1到最大的n位数

    题目描述: 输入数字n,按顺序打印出从1到最大的n位十进制数.比如输入3,则打印出1.2.3一直到最大的3位数999. 分析:注意不能直接输入最大的n位十进制数,因为可能属于大数,这个数无法用int或 ...