请选择 进入手机版 | 继续访问电脑版

蓝冰网

 找回密码
立即注册
查看: 303|回复: 0

JavaScript多个audio标签,点击其中一个播放时,其他的停止

[复制链接]

19

主题

22

帖子

428

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
428
发表于 2021-8-20 21:37:52 | 显示全部楼层 |阅读模式
JavaScript多个audio标签,点击其中一个播放时,其他的停止播放

比如源文件中的代码为
  1. <audio src="/1.mp3" controls=""></audio>
  2. <audio src="/2.mp3" controls=""></audio>
  3. <audio src="/3.mp3" controls=""></audio>
复制代码

加入下面JavaScript代码即可实现只能播放一个
  1. <script type="text/javascript">
  2. // 获取所有audios
  3.     var audios = document.getElementsByTagName("audio");
  4.     // 暂停函数
  5.     function pauseAll() {
  6.         var self = this;
  7.         [].forEach.call(audios, function(i) {
  8.             // 将audios中其他的audio全部暂停
  9.             i !== self && i.pause();
  10.         })
  11.     }
  12.     // 给play事件绑定暂停函数
  13.     [].forEach.call(audios, function(i) {
  14.         i.addEventListener("play", pauseAll.bind(i));
  15.     })
  16. </script>
复制代码


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|蓝冰网 ( 豫ICP备13009983号-1 )

GMT+8, 2021-10-25 02:50 , Processed in 0.070891 second(s), 19 queries .

Powered by 蓝冰网

Copyright © 2011-2021

快速回复 返回顶部 返回列表