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. Discrete Mathematics and Its Applications | 1 CHAPTER The Foundations: Logic and Proofs | 1.3 Propositional Equivalences

    DEFINITION 1 A compound proposition that is always true,no matter what the truth values of the propo ...

  2. Tensorflow Learning1 模型的保存和恢复

    CKPT->pb Demo 解析 tensor name 和 node name 的区别 Pb 的恢复 CKPT->pb tensorflow的模型保存有两种形式: 1. ckpt:可以恢 ...

  3. css兼容问题收集+部分效果收集+css重置

    1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height),如果di ...

  4. 利用CSS的translate属性或利用CSS实现图片居中的效果

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

  5. sublime3跳转函数

    点击Preferences->Browse Packages进入Packages目录,然后打开User目录,查看User目录里面有没有Default (Windows).sublime-mous ...

  6. spark(2)

    1.spark模块 -------------------------------------- (1)Spark Core //核心库 (2)Spark SQL //核心库 (3)Spark Str ...

  7. Ionic创建混合App(二)

    ionic 2 启动应用进入欢迎引导页 1.首先,使用CLI命令,创建引导页面 ionic g page welcome 2.需改welcome.html模板文件 <ion-slides pag ...

  8. 使用pyenv对python版本管理

     1.使用pyenv进行python版本管理   1.1安装对应的依赖包,如果不安装后续操作可能会因为缺少某一个变量包而出现错误 sudo apt-get install -y make build- ...

  9. myeclipse2014下卸载,安装maven插件。

    转自:https://blog.csdn.net/gaoshang10/article/details/21177893 一.卸载方法: 点击Help->About Myeclipse Ente ...

  10. CentOS7升级gcc

    CentOS7.5升级gcc到8.3.0版本 1.下载源码包 cd /usr/local/src wget http://ftp.tsukuba.wide.ad.jp/software/gcc/rel ...