JS audio播放一个的时候,其他正在播放的关闭
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播放一个的时候,其他正在播放的关闭的更多相关文章
- JavaScript多个音频audio标签,点击其中一个播放时,其他的停止播放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Audio 标签的使用和自己封装一个强大的React音乐播放器
原文地址:https://www.dodoblog.cn/blog?id=5be84d5c70b2b617f27a4610 这篇文章主要介绍一下博客里的这个音乐播放器是怎么写的 为了更好的表达高深的东 ...
- js audio 播放音乐
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 【原创】使用JS封装的一个小型游戏引擎及源码分享
1 /** * @description: 引擎的设计与实现 * @user: xiugang * @time: 2018/10/01 */ /* * V1.0: 引擎实现的基本模块思路 * 1.创建 ...
- iOS Dev (20) 用 AVAudioPlayer 播放一个本地音频文件
iOS Dev (20) 用 AVAudioPlayer 播放一个本地音频文件 作者:CSDN 大锐哥 博客:http://blog.csdn.net/prevention 步骤 第一步:在 Proj ...
- iOS Dev (21) 用 AVPlayer 播放一个本地音频文件
iOS Dev (21) 用 AVPlayer 播放一个本地音频文件 作者:CSDN 大锐哥 博客:http://blog.csdn.net/prevention 前言 这篇文章与上一篇极其相似,要注 ...
- 解决audio和video在手机端无法自动播放问题
各大浏览器都为了节省流量,做出了优化,在用户没有行为动作时(交互)不予许自动播放 <audio src="music/bg.mp3" autoplay loop contro ...
- 解决html5 audio iphone,ipd,safari不能自动播放问题
html audio 在iPhone,ipd,safari浏览器不能播放是有原因滴 (在safri on ios里面明确指出等待用户的交互动作后才能播放media,也就是说如果你没有得到用户的acti ...
- 用原生js来写一个swiper滑块插件
是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...
随机推荐
- python每日一练:0005题
第 0005 题: 你有一个目录,装了很多照片,把它们的尺寸变成都不大于 iPhone5 分辨率的大小. import cv2 import os def resize(path,sizeX,size ...
- 【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 ...
- 【Linux开发】【Qt开发】ARM QT移植详细步骤教程
ARM QT移植详细步骤教程 米尔SAM9X5和A5D3X上默认的Qt版本是4.5.3,当这个版本的Qt库不能满足实际开发需求时,可通过此方法制定Qt开发.运行环境. 移植的步骤如下: 1.下载新版q ...
- 20191127 Spring Boot官方文档学习(4.12)
4.12.缓存(Caching) Spring框架提供了对应用程序透明添加缓存的支持.从本质上讲,抽象将缓存应用于方法,从而根据缓存中可用的信息减少执行次数.缓存逻辑是透明应用的,不会对调用者造成任何 ...
- 关于连接池和DBUtils
1.关于数据库连接池 连接池就是创建和管理一个连接缓冲池的技术,这些连接好被任意线程所使用,数据库连接池负责分配和管理.释放数据库连接,总而言之数据库连接池就是提高对数据库的操作性能. 数据库连接池: ...
- 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个,导致的报错. 也就是说 ...
- C++类中的函数重载
1,本课程最初阶段就学习了函数重载,但是那时研究目标仅限于全局函数,到目前 为止我们学习了三种函数: 1,全局函数: 2,普通成员函数: 3,静态成员函数: 这三种不同类型的函数之间是否可以构成重载, ...
- 安装Pycharm(方便编辑代码的IDE(编辑器))以及 使用Pycharm新建项目
安装Pycharm(方便编辑代码的IDE(编辑器))以及 使用Pycharm新建项目 一.下载安装Pycharm 首先要下载Pycharm这个软件,官网的下载地址是: http://www.jetbr ...
- RMQ 模板
RMQ(Range Minimum/Maximum Query),即区间最值查询,是指这样一个问题:对于长度为 n的数列A,回答若干次询问RMQ(i,j),返回数列A中下标在区间[i,j]中的最小/大 ...
- 剑指offer 打印从1到最大的n位数
题目描述: 输入数字n,按顺序打印出从1到最大的n位十进制数.比如输入3,则打印出1.2.3一直到最大的3位数999. 分析:注意不能直接输入最大的n位十进制数,因为可能属于大数,这个数无法用int或 ...