网站多容器音频播放器问题：点击对应.play按钮播放指定音频

我懂你的痛点——现在你的JS代码只抓取了页面上第一个audio和播放按钮，所以不管点哪个按钮，都只会控制第一首歌。要实现每个播放器独立工作，我们需要把事件绑定逻辑改成针对每个.audio-player容器单独处理，让每个按钮都能找到自己对应的音频元素。

修改后的完整代码 #

HTML（无需改动，保持原有结构即可）

<div class="audio-player">
  <audio src="music.mp3"></audio>
  <button class="play">play</button>
  <div class="seek-bar">
    <div class="fill"><div class="handle"></div></div>
  </div>
</div>
<div class="audio-player">
  <audio src="music1.mp3"></audio>
  <button class="play">play</button>
  <div class="seek-bar">
    <div class="fill"><div class="handle"></div></div>
  </div>
</div>

CSS（仅微调布局，核心样式不变）

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0f0f0f; color: #fff; height: 100vh; display: flex; justify-content: center; align-items: center; touch-action: none; flex-direction: column; gap: 20px; }
.audio-player { width: 80%; height: 200px; box-shadow: 0 0 10px rgba(255,255,255,.2); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; justify-content: center; }
.play { width: 40px; height: 40px; background-color: #fff; border-radius: 50%; margin-bottom: 30px; outline: none; border: none; cursor: pointer; }
.play:focus { background-color: #f90; }
.seek-bar { width: 90%; margin: 0 auto; height: 4px; border-radius: 4px; background-color: rgba(255,255,255,.2); display: flex; align-items: center; cursor: pointer; }
.fill { height: 4px; border-radius: 4px; background-color: #fff; position: relative; }
.handle { width: 12px; height: 12px; border-radius: 50%; position: absolute; right: 0; top: 50%; background: #fff; transform: translate(50%,-50%) scale(0); transition: transform .2s; }
.seek-bar:hover .handle { transform: translate(50%,-50%) scale(1); }
.handle:active { transform: translate(50%,-50%) scale(1.4) !important; }

JavaScript（核心修改部分）

// 获取页面上所有的音频播放器容器
const players = document.querySelectorAll('.audio-player');

// 遍历每个容器，为每个播放器绑定独立的控制逻辑
players.forEach(player => {
  // 从当前容器内获取对应的元素，而非全局查找
  const audio = player.querySelector('audio');
  const playBtn = player.querySelector('button.play');
  const seekBar = player.querySelector('.seek-bar');
  const fillBar = seekBar.querySelector('.fill');
  let pointerdown = false; // 每个播放器单独维护拖拽状态

  // 播放/暂停按钮点击事件
  playBtn.addEventListener('click', function(){
    audio.paused ? audio.play() : audio.pause();
  });

  // 音频进度更新同步到进度条
  audio.addEventListener('timeupdate', function(){
    if(pointerdown) return;
    const progress = audio.currentTime / audio.duration;
    fillBar.style.width = `${progress * 100}%`;
  });

  // 工具函数：限制数值在min和max之间
  function clamp(min, val, max) {
    return Math.min(Math.max(min, val), max);
  }

  // 计算鼠标在进度条上的百分比位置
  function getProgress(e) {
    const progress = (e.clientX - seekBar.offsetLeft) / seekBar.clientWidth;
    return clamp(0, progress, 1);
  }

  // 进度条拖拽开始
  seekBar.addEventListener('pointerdown', function(e){
    pointerdown = true;
    const progress = getProgress(e);
    fillBar.style.width = `${progress * 100}%`;
  });

  // 拖拽结束，同步音频进度
  window.addEventListener('pointerup', function(e){
    if(!pointerdown) return;
    pointerdown = false;
    const progress = getProgress(e);
    fillBar.style.width = `${progress * 100}%`;
    audio.currentTime = progress * audio.duration;
  });
});

关键修改点说明 #

1. 容器内元素选择：不再用document.querySelector全局获取单个元素，而是通过player.querySelector从当前播放器容器内定位元素，确保每个按钮只对应自己容器里的音频。
2. 独立遍历绑定：用querySelectorAll获取所有播放器容器，通过forEach循环为每个容器单独绑定事件逻辑，每个播放器的状态（如拖拽状态pointerdown）都是独立的，不会互相干扰。
3. 状态隔离：将pointerdown变量放在循环内部，每个播放器拥有自己的状态变量，避免多个播放器之间的状态冲突。

修改完成后，点击第一个播放器的播放按钮会播放music.mp3，点击第二个则播放music1.mp3，进度条也会各自独立工作。

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