如何阻止HTML5/JavaScript多音频轨道同时播放？

嘿，看你这段循环生成的HTML，首先得提个关键问题：所有<audio>标签都用了同一个id="music"，但HTML里id是必须唯一的，这会导致你后面用JS控制的时候，只能选中第一个音频元素，其他的根本没法操作。下面给你一套可行的解决方案：

先修正HTML结构 #

把重复的id换成class，同时让每个音频和它对应的播放器都包裹在同一个容器里，这样就能通过层级关系找到对应元素了，修改后的模板大概是这样：

<div class='audio-wrap'>
  <audio class='music' preload='true'>
    <source src='$file' type='audio/mpeg'>
  </audio>
  <div class='player paused'>
    <div class='progress-bar'>
      <div class='runner'></div>
    </div>
    <div class='description'>
      <div class='title'>$trackTitle</div>
      <!-- 这里放你的标题等内容 -->
    </div>
    <!-- 加个播放/暂停按钮，方便用户操作 -->
    <button class='play-toggle'>播放</button>
  </div>
</div>

然后写JavaScript控制逻辑 #

接下来实现核心的播放/暂停、进度条更新，以及播放新音频时自动暂停其他音频的功能：

// 给所有播放按钮绑定点击事件
document.querySelectorAll('.play-toggle').forEach(btn => {
  btn.addEventListener('click', function() {
    // 通过父容器找到当前对应的音频和播放器
    const container = this.closest('.audio-wrap');
    const audio = container.querySelector('.music');
    const player = container.querySelector('.player');

    if (audio.paused) {
      // 先暂停所有其他正在播放的音频
      document.querySelectorAll('.music').forEach(otherAudio => {
        if (otherAudio !== audio && !otherAudio.paused) {
          otherAudio.pause();
          // 同步更新其他播放器的状态
          const otherContainer = otherAudio.closest('.audio-wrap');
          otherContainer.querySelector('.player').classList.add('paused');
          otherContainer.querySelector('.play-toggle').textContent = '播放';
        }
      });

      // 播放当前音频
      audio.play();
      player.classList.remove('paused');
      this.textContent = '暂停';

      // 监听音频进度，更新进度条
      audio.addEventListener('timeupdate', updateProgress);
    } else {
      // 暂停当前音频
      audio.pause();
      player.classList.add('paused');
      this.textContent = '播放';
      audio.removeEventListener('timeupdate', updateProgress);
    }

    // 进度条更新函数
    function updateProgress() {
      const progressBar = container.querySelector('.progress-bar');
      const runner = container.querySelector('.runner');
      const progressPercent = (audio.currentTime / audio.duration) * 100;
      runner.style.width = `${progressPercent}%`;
    }
  });
});

// 实现点击进度条跳转播放位置的功能
document.querySelectorAll('.progress-bar').forEach(bar => {
  bar.addEventListener('click', function(e) {
    const container = this.closest('.audio-wrap');
    const audio = container.querySelector('.music');
    const barRect = this.getBoundingClientRect();
    const clickPosition = e.clientX - barRect.left;
    const jumpPercent = clickPosition / barRect.width;
    audio.currentTime = jumpPercent * audio.duration;
  });
});

最后加个CSS样式（可选） #

给播放器加些视觉反馈，让状态更直观：

.audio-wrap {
  margin: 15px 0;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}
.progress-bar {
  height: 6px;
  background-color: #f0f0f0;
  cursor: pointer;
  margin: 8px 0;
  border-radius: 3px;
}
.runner {
  height: 100%;
  background-color: #1976d2;
  width: 0%;
  border-radius: 3px;
  transition: width 0.1s ease;
}
.play-toggle {
  border: none;
  background: #1976d2;
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.player.paused .play-toggle {
  background: #4caf50;
}

这样调整后，每个音频轨道都能独立控制，而且播放新音频时会自动暂停其他正在播放的，进度条也能实时更新和跳转，完美解决循环生成多音频的控制问题～

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