JS实现多按钮Audio播放器 互斥播放与暂停控制方案

现有代码缺陷 #

原代码硬绑定了单个Audio实例和ID为ppb1的按钮，仅能控制单个播放器，既无法支持多播放器扩展，也不能实现同一时间仅一个音频播放的互斥规则。

实现逻辑 #

• 所有播放按钮使用统一类名标识，通过自定义属性绑定对应音频资源地址，无需硬编码按钮ID，支持任意数量播放器扩展
• 初始化时为每个按钮独立创建对应的Audio实例，避免全局单实例的绑定问题
• 全局维护当前处于播放状态的音频实例和对应按钮引用，点击任意播放按钮时，先暂停其他正在播放的音频、重置对应按钮图标，再切换当前按钮的播放状态
• 单个音频播放结束后，自动重置对应按钮为播放图标，清空全局播放记录

代码实现 #

HTML结构示例 #

新增播放器时直接复制按钮节点、替换data-audio属性的音频地址即可，无需修改JS代码：

<!-- 可无限扩展的播放器按钮 -->
<i class="fa fa-play audio-btn" data-audio="音频地址1"></i>
<i class="fa fa-play audio-btn" data-audio="音频地址2"></i>
<i class="fa fa-play audio-btn" data-audio="音频地址3"></i>

JS逻辑（基于原有jQuery依赖） #

// 全局记录当前正在播放的音频与对应按钮
let activePlayer = {
  audio: null,
  btn: null
};

// 遍历所有播放器按钮完成初始化
$('.audio-btn').each(function() {
  const $currentBtn = $(this);
  // 为当前按钮绑定专属音频实例
  const audioInstance = new Audio($currentBtn.data('audio'));

  // 音频自然播放结束后重置按钮状态
  audioInstance.onended = function() {
    $currentBtn.removeClass('fa-pause').addClass('fa-play');
    activePlayer.audio = null;
    activePlayer.btn = null;
  };

  // 绑定点击切换逻辑
  $currentBtn.on('click', function() {
    // 点击的是当前正在播放的按钮，执行暂停
    if (activePlayer.btn && activePlayer.btn.is($currentBtn)) {
      audioInstance.pause();
      $currentBtn.removeClass('fa-pause').addClass('fa-play');
      activePlayer.audio = null;
      activePlayer.btn = null;
      return;
    }

    // 暂停上一个正在播放的音频，重置其按钮状态
    if (activePlayer.audio) {
      activePlayer.audio.pause();
      activePlayer.btn.removeClass('fa-pause').addClass('fa-play');
    }

    // 播放当前选中的音频，更新状态
    audioInstance.play();
    $currentBtn.removeClass('fa-play').addClass('fa-pause');
    activePlayer.audio = audioInstance;
    activePlayer.btn = $currentBtn;
  });
});

效果说明 #

• 支持任意数量播放器扩展，新增播放器无需修改JS逻辑
• 自动实现播放互斥：同一时间永远只有一个音频处于播放状态，切换播放器时上一个音频会自动暂停
• 完全保留原有Font Awesome图标切换的交互体验，和单播放器的操作逻辑一致

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