静态HTML站点中如何添加多实例JavaScript Audio Player？

一、将进度条移至容器底部 #

进度条位置由CSS控制，只需调整定位规则即可：

1. 给音频播放器容器.audio-player添加相对定位：

   .audio-player {
     position: relative;
     /* 保留原有样式，如宽度、背景、内边距等 */
     /* 若进度条被内容遮挡，可添加 padding-bottom: 20px;（值对应进度条高度） */
   }
   

2. 给进度条所在的.timeline容器设置绝对定位固定到底部：

   .timeline {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     /* 保留原有样式，如高度、背景色等 */
   }
   

二、实现五个独立音频播放器 #

当前代码仅针对单个播放器，需修改为遍历所有播放器实例，为每个实例绑定独立的音频对象与事件：

1. HTML结构调整 #

复制5个.audio-player容器，通过自定义属性data-audio-src指定每个播放器的音频地址：

<div class="audio-player" data-audio-src="你的第一个音频地址"></div>
<div class="audio-player" data-audio-src="你的第二个音频地址"></div>
<div class="audio-player" data-audio-src="你的第三个音频地址"></div>
<div class="audio-player" data-audio-src="你的第四个音频地址"></div>
<div class="audio-player" data-audio-src="你的第五个音频地址"></div>

2. 修改JavaScript代码 #

将原单实例代码改为多实例遍历逻辑：

// 获取所有音频播放器实例
const audioPlayers = document.querySelectorAll(".audio-player");

// 遍历每个播放器，绑定独立逻辑
audioPlayers.forEach(player => {
  const audioSrc = player.dataset.audioSrc;
  const audio = new Audio(audioSrc);

  // 音频加载完成事件
  audio.addEventListener("loadeddata", () => {
    player.querySelector(".time .length").textContent = getTimeCodeFromNum(audio.duration);
    audio.volume = .75;
  }, false);

  // 进度条点击跳转
  const timeline = player.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(() => {
    if (!audio.duration) return; // 避免未加载完成时报错
    const progressBar = player.querySelector(".progress");
    progressBar.style.width = (audio.currentTime / audio.duration) * 100 + "%";
    player.querySelector(".time .current").textContent = getTimeCodeFromNum(audio.currentTime);
  }, 500);

  // 播放/暂停按钮切换
  const playBtn = player.querySelector(".controls .toggle-play");
  playBtn.addEventListener("click", () => {
    if (audio.paused) {
      playBtn.classList.remove("play");
      playBtn.classList.add("pause");
      audio.play();
      // 可选：点击播放时暂停其他所有播放器
      audioPlayers.forEach(otherPlayer => {
        if (otherPlayer !== player) {
          const otherAudio = otherPlayer._audio;
          const otherBtn = otherPlayer.querySelector(".controls .toggle-play");
          if (otherAudio && !otherAudio.paused) {
            otherAudio.pause();
            otherBtn.classList.remove("pause");
            otherBtn.classList.add("play");
          }
        }
      });
    } else {
      playBtn.classList.remove("pause");
      playBtn.classList.add("play");
      audio.pause();
    }
  }, false);

  // 将音频对象绑定到播放器实例，方便后续逻辑调用
  player._audio = audio;
});

// 时间格式化函数（确保该函数存在）
function getTimeCodeFromNum(num) {
  const seconds = parseInt(num);
  const minutes = parseInt(seconds / 60);
  const hours = parseInt(minutes / 60);
  const finalSeconds = seconds % 60;
  const finalMinutes = minutes % 60;

  return `${hours > 0 ? `${hours}:` : ""}${finalMinutes.toString().padStart(2, "0")}:${finalSeconds.toString().padStart(2, "0")}`;
}

原单实例代码参考 #

const audioPlayer = document.querySelector(".audio-player");
const audio = new Audio(
    "https://jsomerset.uk/images/victory.mp3"
);

console.dir(audio);

audio.addEventListener(
    "loadeddata",
    () => {
        audioPlayer.querySelector(".time .length").textContent = getTimeCodeFromNum(
            audio.duration
        );
        audio.volume = .75;
    },
    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 progressBar = audioPlayer.querySelector(".progress");
    progressBar.style.width = audio.currentTime / audio.duration * 100 + "%";
    audioPlayer.querySelector(".time .current").textContent = getTimeCodeFromNum(
        audio.currentTime
    );
}, 500);

const playBtn = audioPlayer.querySelector(".controls .toggle-play");
playBtn.addEventListener(
    "click",
    () => {
        if (audio.paused) {
            playBtn.classList.remove("play");
            playBtn.classList.add("pause");
            audio.play();
        } else {
            playBtn.classList.remove("pause");
            playBtn.classList.add("play");
            audio.pause();
        }
    },
    false
);

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