自定义JS/CSS音频播放器添加新音轨后无法播放问题求助

问题原因 #

最直接的报错原因：你代码中获取audio元素的逻辑被注释，导致audio变量未定义，所有针对音频的操作都无法生效：

// 这行代码被注释后，audio变量不存在
// var audio = document.getElementById('audio');

其他导致播放异常、多音轨无法切换的常见问题：

• 当前HTML仅配置了1个<source>标签，新增音轨没有对应源配置
• 缺失播放按钮的点击事件逻辑，没有触发audio.play()的调用
• 代码中用到的getTimeCodeFromNum时间格式化函数没有定义，会抛出JS错误中断执行
• 多音轨切换时没有重新触发音频加载逻辑

修复方案 #

1. 修复基础播放逻辑

const audioPlayer = document.querySelector(".audio-player");
// 取消注释，获取页面audio元素
const audio = document.getElementById('audio');

// 补全缺失的时间格式化工具函数
function getTimeCodeFromNum(num) {
  let seconds = parseInt(num);
  let minutes = parseInt(seconds / 60);
  seconds -= minutes * 60;
  return `${minutes}:${String(seconds % 60).padStart(2, '0')}`;
}

console.dir(audio);

audio.addEventListener(
  "loadeddata",
  () => {
    audioPlayer.querySelector(".time .length").textContent = getTimeCodeFromNum(
      audio.duration
    );
    audio.volume = 1.0;
  },
  false
);

// 补全播放按钮点击事件
const playBtn = audioPlayer.querySelector(".toggle-play");
playBtn.addEventListener("click", () => {
  if (audio.paused) {
    audio.play();
    playBtn.classList.remove("fa-play");
    playBtn.classList.add("fa-pause");
  } else {
    audio.pause();
    playBtn.classList.remove("fa-pause");
    playBtn.classList.add("fa-play");
  }
}, false);

// 点击进度条跳转逻辑
const timeline = audioPlayer.querySelector(".timeline");
timeline.addEventListener("click", e => {
  const timelineWidth = window.getComputedStyle(timeline).width;
  const timeToSeek = e.offsetX / parseInt(timelineWidth) * audio.duration;
  audio.currentTime = timeToSeek;
}, false);

// 补全进度条实时更新逻辑
setInterval(() => {
  const progress = audioPlayer.querySelector(".progress");
  progress.style.width = (audio.currentTime / audio.duration) * 100 + "%";
  audioPlayer.querySelector(".time .current").textContent = getTimeCodeFromNum(audio.currentTime);
}, 500);

2. 新增多音轨切换能力

修改HTML，新增音轨切换按钮：

<div class="audio-player">
  <audio id="audio">
    <source src="sound/1.mp3">
  </audio>
  <!-- 新增音轨切换区域，可根据需求调整样式 -->
  <div class="track-switch">
    <button class="track-btn active" data-src="sound/1.mp3">音轨1</button>
    <button class="track-btn" data-src="sound/2.mp3">音轨2</button>
  </div>
  <div class="timeline">
    <div class="progress"></div>
  </div>
  <div class="controls">
    <div class="play-container">
      <div class="toggle-play fas fa-play">
    </div>
    </div>
    <div class="time">
      <div class="current">0:00</div>
      <div class="divider">/</div>
      <div class="length"></div>
    </div>
  </div>
</div>

在JS中新增切换逻辑：

// 音轨切换逻辑
const trackBtns = document.querySelectorAll(".track-btn");
trackBtns.forEach(btn => {
  btn.addEventListener("click", () => {
    trackBtns.forEach(b => b.classList.remove("active"));
    btn.classList.add("active");
    // 更换音频源并重新加载播放
    audio.src = btn.dataset.src;
    audio.load();
    audio.play();
    playBtn.classList.remove("fa-play");
    playBtn.classList.add("fa-pause");
  })
})

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