多实例简单音频播放器问题：仅单个生效，求非jQuery+Font Awesome实现方案

我来帮你搞定这个问题！你猜的没错，querySelector就是罪魁祸首——它只会抓取匹配选择器的第一个元素，所以第二个按钮根本没绑定到对应的音频上。咱们可以通过几个简单的调整，让页面支持任意多个播放器，完全符合你用类、Font Awesome且不依赖jQuery的需求：

第一步：调整HTML结构（可选但推荐） #

把每个音频和对应的控制按钮放到独立的容器里，这样能更清晰地关联每个播放器的组件，避免后续结构变动出问题：

<!-- 第一个播放器 -->
<div class="audio-player">
  <audio src="http://bornemark.se/bb/mp3_demos/PoA_Sorlin_-_Stay_Up.mp3" class="sound" loop></audio>
  <button class="player-control">
    <i class="fa-solid fa-play"></i>
  </button>
</div>

<!-- 第二个播放器 -->
<div class="audio-player">
  <audio src="你的第二个音频地址.mp3" class="sound" loop></audio>
  <button class="player-control">
    <i class="fa-solid fa-play"></i>
  </button>
</div>

第二步：编写JavaScript逻辑 #

核心思路是获取所有控制按钮，逐个绑定事件，让每个按钮只操作自己对应的音频元素：

// 获取所有播放器控制按钮
const playerControls = document.querySelectorAll('.player-control');

// 遍历每个按钮，绑定点击事件
playerControls.forEach(control => {
  control.addEventListener('click', function() {
    // 找到当前按钮所属播放器里的音频元素
    const audio = this.closest('.audio-player').querySelector('.sound');
    const icon = this.querySelector('i');

    // 切换播放/暂停状态
    if (audio.paused) {
      audio.play();
      // 切换图标为暂停
      icon.classList.remove('fa-play');
      icon.classList.add('fa-pause');
    } else {
      audio.pause();
      // 切换图标为播放
      icon.classList.remove('fa-pause');
      icon.classList.add('fa-play');
    }
  });
});

关键细节解释 #

• querySelectorAll：会返回所有匹配选择器的元素集合，而不是单个元素，这是支持多播放器的基础。
• closest('.audio-player')：向上查找最近的.audio-player容器，确保每个按钮只找到自己所在容器里的音频，不会和其他播放器混淆。
• 图标切换：通过修改Font Awesome的类名，实现播放/暂停状态的视觉反馈。

可选：添加基础CSS美化 #

给播放器加一点样式，让交互更直观：

.audio-player {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px;
}

.player-control {
  border: none;
  background: #f0f0f0;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.player-control:hover {
  background: #e0e0e0;
}

这样修改后，你可以在页面上添加任意多个.audio-player容器，每个播放器都能独立工作，完全符合你的需求～

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