jQuery多音频按钮功能优化：实现暂停其他音频及直接切换播放

首先咱们先梳理下原代码存在的小问题：全局的playing变量会导致点击不同音频按钮时状态混乱，而且逻辑里的.playing遍历也有点多余，因为每次点击只会给当前按钮加playing类。

下面是修改后的代码，既保留“点击一个暂停其余”的功能，又实现了“点击正在播放的音频就暂停，点击未播放的就直接切换播放”的需求：

修改后的JavaScript代码 #

// 追踪当前正在播放的音频元素
let currentPlayingAudio = null;

jQuery('.player').click(function() {
  const $this = jQuery(this);
  const currentAudio = $this.find('audio')[0];
  
  // 如果当前点击的音频正在播放，就暂停它
  if (currentAudio === currentPlayingAudio && !currentAudio.paused) {
    currentAudio.pause();
    currentAudio.currentTime = 0;
    $this.removeClass('playing');
    currentPlayingAudio = null;
    return;
  }
  
  // 暂停所有其他音频并重置时间
  jQuery('.player').not($this).each(function() {
    const audio = jQuery(this).find('audio')[0];
    audio.pause();
    audio.currentTime = 0;
    jQuery(this).removeClass('playing');
  });
  
  // 播放当前音频并更新状态
  currentAudio.play();
  $this.addClass('playing');
  currentPlayingAudio = currentAudio;
});

对应的HTML结构（优化了音频标签写法） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="player" >
  <h2>Fractions du Silence</h2>
  <audio class="sound" src="http://localhost:8888/sabrinama.com/wp-content/uploads/2020/08/Fractions-du-silence-Bertrand-Dubedout.mp3">
    <a href="http://localhost:8888/sabrinama.com/wp-content/uploads/2020/08/Fractions-du-silence-Bertrand-Dubedout.mp3">Fractions du silence</a>
  </audio>
</div>
<div class="player">
  <h2>Merlin, 1. Movement</h2>
  <audio class="sound" src="http://localhost:8888/sabrinama.com/wp-content/uploads/2020/08/Merlin-1.-Movement-Andrew-Thomas.mp3">
    <a href="http://localhost:8888/sabrinama.com/wp-content/uploads/2020/08/Merlin-1.-Movement-Andrew-Thomas.mp3">Merlin, 1. Movement (Andrew Thomas)</a>
  </audio>
</div>

逻辑说明 #

• 用currentPlayingAudio变量追踪当前正在播放的音频元素，避免全局状态混乱；
• 点击按钮时先判断：如果是正在播放的音频，就暂停并重置状态；如果不是，就先停掉所有其他音频，再播放当前的；
• 移除了原代码中多余的.playing遍历，直接操作当前点击的元素和其余元素，逻辑更清晰；
• 顺便修正了HTML里<source>标签的写法，直接给<audio>加src属性更规范，<source>一般用于多格式兼容的场景。

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