嗨，针对你这个多直播电台播放器的需求，其实只需要加一点原生JavaScript就能轻松搞定！核心思路就是监听每个播放器的播放事件，一旦有某个音频开始播放，就暂停页面上所有其他的音频播放器。

步骤1：给所有音频播放器添加统一类名 #

首先，先给你的每个<audio>标签加上一个统一的类（比如radio-player），这样我们能轻松选中所有播放器：

<audio class="radio-player" src="https://cbc_r2_tor.akacast.akamaistream.net/7/364/451661/v1/rc.akacast.akamaistream.net/cbc_r2_tor" controls style="width:75px;" volume="1.0"></audio>
<audio class="radio-player" src="http://204.2.199.166/7/288/80873/v1/rogers.akacast.akamaistream.net/tor925" controls="true" style="width:75px;" volume="1.0"></audio>
<!-- 其他播放器也同样加上class="radio-player" -->

步骤2：添加JavaScript实现互斥逻辑 #

接下来添加一段脚本，监听每个播放器的play事件，当事件触发时，遍历所有播放器并暂停当前播放的那个之外的所有音频：

// 获取所有带radio-player类的音频元素
const players = document.querySelectorAll('.radio-player');

// 给每个播放器绑定play事件监听
players.forEach(player => {
  player.addEventListener('play', () => {
    // 遍历所有播放器，暂停非当前播放的音频
    players.forEach(otherPlayer => {
      if (otherPlayer !== player) {
        otherPlayer.pause();
      }
    });
  });
});

代码说明 #

• document.querySelectorAll('.radio-player')：一次性选中所有我们标记好的音频播放器，比一个个单独选id高效很多。
• play事件：当用户点击播放按钮或者音频自动开始播放时，这个事件会触发。
• otherPlayer.pause()：调用音频元素的原生暂停方法，直接停止其他正在播放的音频。

这个方案很轻量，不需要引入任何框架，纯原生JS就能实现，完全适配你现有的播放器结构～

内容的提问来源于stack exchange，提问作者timusR