自定义音频播放器重复问题：JS与CSS多播放器失效排查

嘿，你遇到的这个问题我太熟悉了——核心原因就是当前的JavaScript代码完全是针对单个固定ID的音频元素写的！当你复制多个播放器时，所有播放器的音频、按钮、进度条都用了相同的ID，而getElementById只会返回页面中第一个匹配该ID的元素，后面的播放器自然就得不到JS的“关照”，没法正常工作啦。

下面给你两种解决方案，我更推荐第二种（基于类的批量处理），不管你要加10个还是20个播放器，都能轻松搞定：

方案一：为每个播放器设置唯一ID（适合少量播放器） #

如果你的播放器数量不多，可以给每个播放器的容器、音频、按钮、进度条设置唯一ID，然后修改JS为每个播放器单独初始化事件。

修改后的HTML示例（2个播放器） #

<!DOCTYPE html> 
<html lang="es"> 
<head> 
  <title>Reproductor de Video</title> 
  <link rel="stylesheet" href="reproductor.css"> 
  <script src="reproductor.js"></script> 
</head> 
<body> 
  <!-- 第一个播放器 -->
  <section class="reproductor-container">
    <audio id="medio-1" width="400" height="400"> 
      <source src="rout.mp3"> 
    </audio> 
    <nav> 
      <div class="botones"> 
        <button class="button" id="reproducir-1">play</button> 
      </div> 
      <div class="barra" id="barra-1"> 
        <div class="progreso" id="progreso-1"></div> 
      </div> 
      <div style="clear: both"></div> 
    </nav> 
  </section>

  <!-- 第二个播放器 -->
  <section class="reproductor-container">
    <audio id="medio-2" width="400" height="400"> 
      <source src="another.mp3"> 
    </audio> 
    <nav> 
      <div class="botones"> 
        <button class="button" id="reproducir-2">play</button> 
      </div> 
      <div class="barra" id="barra-2"> 
        <div class="progreso" id="progreso-2"></div> 
      </div> 
      <div style="clear: both"></div> 
    </nav> 
  </section>
</body> 
</html>

修改后的JS（支持多ID） #

function iniciarReproductor(id) {
  const maximo = 80;
  const medio = document.getElementById(`medio-${id}`);
  const reproducir = document.getElementById(`reproducir-${id}`);
  const barra = document.getElementById(`barra-${id}`);
  const progreso = document.getElementById(`progreso-${id}`);
  let bucle;

  function presionar() {
    if (!medio.paused && !medio.ended) {
      medio.pause();
      reproducir.innerHTML = 'play';
      window.clearInterval(bucle);
    } else {
      medio.play();
      reproducir.innerHTML = 'pause';
      bucle = setInterval(estado, 1000);
    }
  }

  function estado() {
    if (!medio.ended) {
      const total = parseInt(medio.currentTime * maximo / medio.duration);
      progreso.style.width = total + 'px';
    } else {
      progreso.style.width = '0px';
      reproducir.innerHTML = 'play';
      window.clearInterval(bucle);
    }
  }

  function mover(e) {
    if (!medio.paused && !medio.ended) {
      const ratonX = e.pageX - barra.offsetLeft;
      const nuevoTiempo = ratonX * medio.duration / maximo;
      medio.currentTime = nuevoTiempo;
      progreso.style.width = ratonX + 'px';
    }
  }

  reproducir.addEventListener('click', presionar, false);
  barra.addEventListener('click', mover, false);
}

// 初始化所有播放器
window.addEventListener('load', () => {
  iniciarReproductor(1);
  iniciarReproductor(2);
  // 有更多播放器就继续加
}, false);

方案二：使用类选择器批量处理（推荐，支持任意数量播放器） #

这种方法不需要给每个元素设置唯一ID，而是通过父容器的类来定位每个播放器内的元素，JS会自动遍历所有播放器并绑定事件，扩展性超强——新增播放器时只需复制粘贴整个播放器模块就行，完全不用改JS！

修改后的HTML（任意数量播放器） #

<!DOCTYPE html> 
<html lang="es"> 
<head> 
  <title>Reproductor de Video</title> 
  <link rel="stylesheet" href="reproductor.css"> 
  <script src="reproductor.js"></script> 
</head> 
<body> 
  <!-- 播放器1 -->
  <section class="reproductor">
    <audio class="medio" width="400" height="400"> 
      <source src="rout.mp3"> 
    </audio> 
    <nav> 
      <div class="botones"> 
        <button class="button reproducir">play</button> 
      </div> 
      <div class="barra"> 
        <div class="progreso"></div> 
      </div> 
      <div style="clear: both"></div> 
    </nav> 
  </section>

  <!-- 播放器2 -->
  <section class="reproductor">
    <audio class="medio" width="400" height="400"> 
      <source src="another.mp3"> 
    </audio> 
    <nav> 
      <div class="botones"> 
        <button class="button reproducir">play</button> 
      </div> 
      <div class="barra"> 
        <div class="progreso"></div> 
      </div> 
      <div style="clear: both"></div> 
    </nav> 
  </section>

  <!-- 可以继续添加N个播放器 -->
</body> 
</html>

修改后的JS（自动绑定所有播放器） #

function iniciarReproductor(container) {
  const maximo = 80;
  const medio = container.querySelector('.medio');
  const reproducir = container.querySelector('.reproducir');
  const barra = container.querySelector('.barra');
  const progreso = container.querySelector('.progreso');
  let bucle;

  function presionar() {
    if (!medio.paused && !medio.ended) {
      medio.pause();
      reproducir.textContent = 'play';
      clearInterval(bucle);
    } else {
      medio.play();
      reproducir.textContent = 'pause';
      bucle = setInterval(actualizarEstado, 1000);
    }
  }

  function actualizarEstado() {
    if (!medio.ended) {
      const porcentaje = medio.currentTime / medio.duration;
      progreso.style.width = `${porcentaje * maximo}px`;
    } else {
      progreso.style.width = '0px';
      reproducir.textContent = 'play';
      clearInterval(bucle);
    }
  }

  function moverBarra(e) {
    if (!medio.paused && !medio.ended) {
      const rect = barra.getBoundingClientRect();
      const ratonX = e.clientX - rect.left;
      const porcentaje = ratonX / maximo;
      medio.currentTime = porcentaje * medio.duration;
      progreso.style.width = `${ratonX}px`;
    }
  }

  reproducir.addEventListener('click', presionar);
  barra.addEventListener('click', moverBarra);
}

// 页面加载完成后，初始化所有播放器
window.addEventListener('load', () => {
  const reproductores = document.querySelectorAll('.reproductor');
  reproductores.forEach(iniciarReproductor);
});

修改后的CSS（把ID选择器改成类选择器） #

body{ 
  text-align: center; 
} 
header, section, footer, aside, nav, article, figure, figcaption, hgroup{ 
  display : block; 
} 
.reproductor{ 
  width: 100px; 
  height: 100px; 
  margin: 60px auto; 
  padding: 5px; 
  background: blue; 
  border: 1px solid #666666; 
} 
nav{ 
  margin: 1px 0px; 
} 
.button { 
  font-family: arial; 
  background-color: black; 
  border: none; 
  color: white; 
  padding: ; 
  text-align: center; 
  font-size: 12px; 
  margin: 4px 2px; 
  opacity: 0.6; 
  transition: 0.3s; 
  display: inline-block; 
  text-decoration: none; 
  cursor: pointer; 
} 
.button:hover {opacity: 1} 
.botones{ 
  background-color: black; 
  width: 100px; 
  height: 20px; 
} 
.barra{ 
  position: relative; 
  width: 88px; 
  height: 66px; 
  padding: 4px; 
  border: 1px solid black; 
  background: white; 
} 
.progreso{ 
  position: absolute; 
  width: 0px; 
  height: 60px; 
  background: black; 
}

关键说明 #

1. ID唯一性问题：HTML中ID必须是唯一的，重复ID会导致DOM选择器只返回第一个匹配元素，这是你当前问题的直接原因。
2. 方案二的优势：使用类选择器和父容器定位，新增播放器时只需复制粘贴整个.reproductor模块，无需修改JS代码，非常适合批量创建播放器。
3. 事件绑定优化：每个播放器的事件和状态都是独立的，不会互相干扰，因为每个播放器的变量都封装在iniciarReproductor函数的作用域内。

内容的提问来源于stack exchange，提问作者Victoria G.