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即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...
随机推荐
- Chapter02 第二节 语句和变量
2.2 C++语句 2.11 声明语句和变量 示例程序: // carrots.cpp #include <bits/stdc++.h> using namespace std; int ...
- 关于golang的label
1 label所在的代码段在没有跳转的时候按照所在的位置按顺序执行 2 break label和continue label可以一次性从多重循环中跳出 3 goto label的用法和c/c++中的一 ...
- SQL server字符分割
USE [vanke_develop] GO /****** Object: UserDefinedFunction [dbo].[func_Split] Script Date: 2019/5/22 ...
- CentOS 7 下安装.NET Core SDK 2.1
一.RPM包安装 1.导入rpm源 sudo rpm -Uvh https://packages.microsoft.com/config/rhel/7/packages-microsoft-prod ...
- 【SSL2325】最小转弯问题
题面: \[\Large\text{最小转弯问题}\] \[Time~Limit:1000MS~~Memory~Limit:65536K\] Description 给出一张地图,这张地图被分为 n× ...
- 查看linux中所有用户的三种方式
通过使用/etc/passwd 文件,getent命令,compgen命令这三种方法查看系统中用户的信息. Linux 系统中用户信息存放在/etc/passwd文件中. 这是一个包含每个用户基本信息 ...
- TCP滑动窗体
TCP的滑动窗体攻克了端到端的流量控制问题,同意接受方对传输进行限制.直到它拥有足够的缓冲空间来容纳很多其他的数据.滑动窗体的大小由接收方确定,接收方在发送确认信号给发送方的同一时候告诉发送方自己的缓 ...
- ThinkPHP中的display()和fetch()的区别
fetch()传入的参数是模板名,用模板文件来输出; display()传入的是字符串,输出传递的内容.
- mkpasswd - 为用户产生新口令
总览 SYNOPSIS mkpasswd [ args ] [ user ] 介绍 INTRODUCTION mkpasswd 为用户产生口令并自动应用.它是基于O'Reilly的书<Explo ...
- Dinic二分图匹配 || Luogu P3386
题面:[模板]二分图匹配 思路:Dinic实现二分图匹配,要建一个超级源点(S)和超级汇点(T),分别定为N+M+1和N+M+2 然后S去和N中的数建正边和反边,正边权值为1,反边权值为0:M中的数去 ...