自定义音频播放器多轨道独立speedList调速失效修复咨询

API 探路者

2026-9-27

问题核心原因

HTML 规范中 id 属性全局唯一，getElementById("speedlist") 只能匹配到页面第一个调速控件，其余轨道的调速控件不会被绑定事件
原有调速逻辑固定修改全局 audio 变量，没有和当前操作的调速控件对应的音频轨道做关联

修改方案

1. 调整HTML结构

把重复的 id="speedlist" 改为 class="speedlist"，每个音频轨道独立包装在同一个.audio-player容器内，容器内包含专属的audio元素和调速控件：

<!-- 单条音频轨道示例，多条轨道复制对应结构即可 -->
<div class="audio-player">
  <audio class="audio-track" src="你的音频地址"></audio>
  <select class="speedlist">
    <option value="1" selected></option>
    <option value="0.5">0.5</option>
    <option value="1.5">1.5</option>
    <option value="2">2</option>
  </select>
</div>

2. 调整CSS选择器

把id选择器改为class选择器，适配所有调速控件：

.audio-player .speedlist {
  position: relative;
  display: flex;
  left: 1.5rem;
  top: 0.1rem;
  outline: none !important;
  border: none !important;
  background-image: url("icon/speed.png");
  background-size: 100%;
  background-repeat: no-repeat;
  width: 3px;
  -webkit-appearance: none;
  appearance: auto;
}

3. 调整JS逻辑

批量绑定所有调速控件的事件，调速时自动匹配当前控件对应的专属音频轨道：

// 选中页面所有调速控件
const speedLists = document.querySelectorAll(".speedlist");
// 批量绑定事件
speedLists.forEach(speedList => {
  speedList.addEventListener("change", changeSpeed);
});

function changeSpeed(event) {
  // 查找当前调速控件所属轨道的音频元素
  const currentAudio = event.target.closest(".audio-player").querySelector(".audio-track");
  // 仅修改当前轨道的播放速率
  currentAudio.playbackRate = event.target.value;
}