如何为页面中多个音频播放器复用播放速度控制逻辑

问题根源 #

原代码通过固定ID获取音频元素，且每个速度对应单独函数，导致仅能控制第一个音频，新增音频需重复编写代码，冗余度高。

方案一：复用函数+关联容器（内联事件） #

修改后的HTML

<div class="audio-group">
  <audio class="audio-player" controls src="/home/../../../1-001.mp3"></audio>
  <button onclick="getPlaySpeed(this)" type="button">What's the speed</button>
  <button onclick="setPlaySpeed(this, 1.0)" type="button">1</button>
  <button onclick="setPlaySpeed(this, 0.9)" type="button">0.9</button>
  <button onclick="setPlaySpeed(this, 0.8)" type="button">0.8</button>
</div>
<div class="audio-group">
  <audio class="audio-player" controls src="/home/../../../1-002.mp3"></audio>
  <button onclick="getPlaySpeed(this)" type="button">What's the speed</button>
  <button onclick="setPlaySpeed(this, 1.0)" type="button">1</button>
  <button onclick="setPlaySpeed(this, 0.9)" type="button">0.9</button>
  <button onclick="setPlaySpeed(this, 0.8)" type="button">0.8</button>
</div>

优化后的JavaScript

// 通用函数：获取当前按钮所在组的音频元素
function getAudioElement(button) {
  return button.closest('.audio-group').querySelector('.audio-player');
}

// 获取当前音频播放速度
function getPlaySpeed(button) {
  const audio = getAudioElement(button);
  alert(audio.playbackRate);
}

// 设置指定音频的播放速度
function setPlaySpeed(button, speed) {
  const audio = getAudioElement(button);
  audio.playbackRate = speed;
}

方案二：事件委托（更优雅的无内联事件写法） #

修改后的HTML

<div class="audio-group">
  <audio class="audio-player" controls src="/home/../../../1-001.mp3"></audio>
  <button data-action="get-speed" type="button">What's the speed</button>
  <button data-action="set-speed" data-speed="1.0" type="button">1</button>
  <button data-action="set-speed" data-speed="0.9" type="button">0.9</button>
  <button data-action="set-speed" data-speed="0.8" type="button">0.8</button>
</div>
<div class="audio-group">
  <audio class="audio-player" controls src="/home/../../../1-002.mp3"></audio>
  <button data-action="get-speed" type="button">What's the speed</button>
  <button data-action="set-speed" data-speed="1.0" type="button">1</button>
  <button data-action="set-speed" data-speed="0.9" type="button">0.9</button>
  <button data-action="set-speed" data-speed="0.8" type="button">0.8</button>
</div>

优化后的JavaScript

// 通过事件委托统一处理所有按钮点击
document.addEventListener('click', function(e) {
  const button = e.target;
  // 仅处理音频组内的按钮
  const audioGroup = button.closest('.audio-group');
  if (!audioGroup) return;

  const audio = audioGroup.querySelector('.audio-player');
  
  // 根据按钮的data-action执行对应操作
  if (button.dataset.action === 'get-speed') {
    alert(audio.playbackRate);
  } else if (button.dataset.action === 'set-speed') {
    const speed = parseFloat(button.dataset.speed);
    audio.playbackRate = speed;
  }
});

核心优势 #

• 无重复代码：新增音频组只需复制HTML结构，无需修改JavaScript
• 关联清晰：通过.audio-group容器确保按钮仅控制同组内的音频
• 扩展性强：如需新增速度档位，只需添加对应按钮并设置data-speed值（方案二）

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