如何复用JavaScript逻辑创建多独立实例音频播放器

你的问题核心在于全局DOM选择器和变量冲突——原来的代码用了getElementById和querySelector（只会匹配第一个元素），而且所有状态变量（比如audioEl、progress、percent）都是全局的，导致只有第一个播放器能正常工作，后续播放器无法绑定事件或读取正确的元素。

要实现类似SoundCloud的多播放器效果，我们需要把播放器逻辑封装成独立实例，每个播放器拥有自己的DOM元素和状态变量，互不干扰。下面是具体的改造方案：

第一步：重构HTML（移除重复ID，统一容器类） #

首先，把所有id替换成类选择器（因为ID在页面中必须唯一），并给每个播放器外层容器加一个统一的类，比如audio-player-container：

<!-- 第一个播放器 -->
<div class="audio-player-container">
  <h1>Amelie Lens - Hypnotized</h1>
  <div class="mainPlayer">
    <div class="audioPlayerDiv">
      <div class="playPauseBtn">
        <div class="btnLine"></div>
        <div class="btnLine"></div>
        <div class="btnLine"></div>
      </div>
      <div class="stopBtnDiv">
        <div class="stopBtn"></div>
      </div>
      <i class="fas fa-volume-down volumeDownIcon volumeIconBtn"></i>
      <div class="mainVolumeDiv">
        <div class="volumeBar">
          <div class="volume"></div>
        </div>
        <span class="volPercentage"></span>
      </div>
      <div class="trackTime">
        <span class="currTime"></span> / <span class="duration"></span>
      </div>
    </div>
    <a class="dlLink" href="/Track/Amelie Lens - Hypnotized.mp3" download="Amelie Lens - Hypnotized">
      <button class="freeDownload">
        <h5>mp3</h5>
        <h3>Free Download</h3>
      </button>
    </a>
    <button class="buyTrack">
      <h3>Buy This Beat</h3>
    </button>
  </div>
  <audio class="track" src="/Track/Amelie Lens - Hypnotized.mp3" download></audio>
  <div class="progressBarCont">
    <div class="progress"></div>
  </div>
</div>

<!-- 第二个播放器 -->
<div class="audio-player-container">
  <h1>Another Artist - Another Track</h1>
  <div class="mainPlayer">
    <!-- 内部结构和第一个完全一致，只改音频链接和标题 -->
    <div class="audioPlayerDiv">
      <div class="playPauseBtn">
        <div class="btnLine"></div>
        <div class="btnLine"></div>
        <div class="btnLine"></div>
      </div>
      <div class="stopBtnDiv">
        <div class="stopBtn"></div>
      </div>
      <i class="fas fa-volume-down volumeDownIcon volumeIconBtn"></i>
      <div class="mainVolumeDiv">
        <div class="volumeBar">
          <div class="volume"></div>
        </div>
        <span class="volPercentage"></span>
      </div>
      <div class="trackTime">
        <span class="currTime"></span> / <span class="duration"></span>
      </div>
    </div>
    <a class="dlLink" href="/Track/Another-Track.mp3" download="Another Artist - Another Track">
      <button class="freeDownload">
        <h5>mp3</h5>
        <h3>Free Download</h3>
      </button>
    </a>
    <button class="buyTrack">
      <h3>Buy This Beat</h3>
    </button>
  </div>
  <audio class="track" src="/Track/Another-Track.mp3" download></audio>
  <div class="progressBarCont">
    <div class="progress"></div>
  </div>
</div>

第二步：封装播放器类（复用逻辑，独立实例） #

把原来的JavaScript逻辑封装成一个类，每个播放器容器实例化一个类对象，这样每个播放器的状态和DOM元素都是独立的：

class AudioPlayer {
  constructor(container) {
    // 绑定当前容器内的所有DOM元素
    this.container = container;
    this.audioEl = container.querySelector('.track');
    this.playPauseBtn = container.querySelector('.playPauseBtn');
    this.stopBtnDiv = container.querySelector('.stopBtnDiv');
    this.progressBarCont = container.querySelector('.progressBarCont');
    this.progress = container.querySelector('.progress');
    this.volumeBar = container.querySelector('.volumeBar');
    this.volumeSlider = container.querySelector('.volume');
    this.volPercentage = container.querySelector('.volPercentage');
    this.currTimeEl = container.querySelector('.currTime');
    this.durationEl = container.querySelector('.duration');
    this.audioPlayerDiv = container.querySelector('.audioPlayerDiv');
    this.volumeIconBtn = container.querySelector('.volumeIconBtn');

    // 初始化状态变量
    this.timer = null;
    this.percent = 0;
    this.stopped = true;
    this.interval = null;
    this.interval2 = null;
    this.audioDownUp = 1;

    // 绑定事件
    this.initEventListeners();
    // 初始化音量
    this.audioEl.volume = 0.31;
    this.volPercentage.textContent = '30 %';
  }

  // 初始化所有事件监听
  initEventListeners() {
    // 加载元数据
    this.audioEl.addEventListener('loadedmetadata', () => this.handleLoadedMetadata());
    // 时间更新
    this.audioEl.addEventListener('timeupdate', () => this.handleTimeUpdate());
    // 播放中
    this.audioEl.addEventListener('playing', (e) => this.handlePlaying(e));
    // 暂停
    this.audioEl.addEventListener('pause', () => this.handlePause());
    // 进度条点击跳转
    this.progressBarCont.addEventListener('mousedown', (e) => this.handleProgressSeek(e));
    // 音量条点击
    this.volumeBar.addEventListener('click', (e) => this.handleVolumeChange(e));
    // 播放/暂停按钮
    this.playPauseBtn.addEventListener('click', () => this.playPauseFunction());
    // 停止按钮
    this.stopBtnDiv.addEventListener('click', () => this.stopFunction());
  }

  // 处理元数据加载
  handleLoadedMetadata() {
    const duration = this.audioEl.duration;
    const currentTime = this.audioEl.currentTime;
    this.durationEl.textContent = this.convertElapsedTime(duration);
    this.currTimeEl.textContent = this.convertElapsedTime(currentTime);
  }

  // 处理时间更新
  handleTimeUpdate() {
    const s = parseInt(this.audioEl.currentTime % 60);
    const m = parseInt((this.audioEl.currentTime / 60) % 60);
    this.currTimeEl.textContent = `${m}:${s < 10 ? '0' + s : s}`;

    if (this.audioEl.ended) {
      this.playPauseBtn.classList.remove('transform');
      this.stopBtnDiv.classList.add('transform');
      this.audioEl.currentTime = 0;
      this.percent = 0;
      this.progress.style.width = '0';
      this.stopped = true;
      clearInterval(this.interval);
      clearInterval(this.interval2);
      this.audioPlayerDiv.classList.remove('playAnimation');
      this.audioPlayerDiv.classList.remove('playAnimation2');
    }
  }

  // 转换时间格式
  convertElapsedTime(inputSeconds) {
    const seconds = Math.floor(inputSeconds % 60);
    const formattedSeconds = seconds < 10 ? "0" + seconds : seconds;
    const minutes = Math.floor(inputSeconds / 60);
    return `${minutes}:${formattedSeconds}`;
  }

  // 处理播放中进度更新
  handlePlaying(event) {
    const duration = event.target.duration;
    this.advance(duration);
  }

  // 处理暂停
  handlePause() {
    clearTimeout(this.timer);
  }

  // 进度条推进逻辑
  advance(duration) {
    const increment = 10 / duration;
    this.percent = Math.min(increment * this.audioEl.currentTime * 10, 100);
    this.progress.style.width = `${this.percent}%`;
    this.startTimer(duration);
  }

  startTimer(duration) {
    if (this.percent < 100) {
      this.timer = setTimeout(() => this.advance(duration), 100);
    }
  }

  // 进度条跳转
  handleProgressSeek(event) {
    const viewportset = this.progressBarCont.getBoundingClientRect();
    const clickedPos = event.clientX - viewportset.left;
    this.audioEl.currentTime = (clickedPos / this.progressBarCont.offsetWidth) * this.audioEl.duration;
  }

  // 音量控制
  handleVolumeChange(e) {
    const viewportOffset = this.volumeBar.getBoundingClientRect();
    let cursorPosition = Math.floor(e.clientX - viewportOffset.left);
    // 限制范围在0-100
    cursorPosition = Math.max(0, Math.min(100, cursorPosition));

    // 设置音量
    this.audioEl.volume = cursorPosition / 100;
    this.volPercentage.textContent = `${cursorPosition} %`;
    this.volumeSlider.style.width = `${cursorPosition}px`;

    // 更新音量图标
    this.volumeIconBtn.classList.remove('fa-volume-mute', 'fa-volume-down', 'fa-volume-up');
    if (cursorPosition === 0) {
      this.volumeIconBtn.classList.add('fa-volume-mute');
    } else if (cursorPosition <= 49) {
      this.volumeIconBtn.classList.add('fa-volume-down');
      this.audioDownUp = 1;
    } else {
      this.volumeIconBtn.classList.add('fa-volume-up');
      this.audioDownUp = 2;
    }

    // 显示音量百分比后隐藏
    this.volPercentage.classList.add('showVolPercent');
    setTimeout(() => {
      this.volPercentage.classList.remove('showVolPercent');
    }, 5000);
  }

  // 播放/暂停功能
  playPauseFunction() {
    if (this.audioEl.paused) {
      this.playPauseBtn.classList.add('transform');
      this.playPauseBtn.classList.add('transform2');
      setTimeout(() => {
        this.playPauseBtn.classList.remove('transform2');
      }, 200);
      this.audioEl.play();
      this.stopped = false;

      // 动画逻辑
      let animation = 1;
      this.interval = setInterval(() => {
        if (animation === 1) {
          this.audioPlayerDiv.classList.add('playAnimation');
          animation = 0;
        } else {
          this.audioPlayerDiv.classList.remove('playAnimation');
          animation = 1;
        }
      }, 16000);

      let animation2 = 1;
      this.interval2 = setInterval(() => {
        if (animation2 === 1) {
          this.audioPlayerDiv.classList.add('playAnimation2');
          animation2 = 0;
        } else {
          this.audioPlayerDiv.classList.remove('playAnimation2');
          animation2 = 1;
        }
      }, 32000);
    } else {
      this.playPauseBtn.classList.remove('transform');
      this.playPauseBtn.classList.add('transform2');
      setTimeout(() => {
        this.playPauseBtn.classList.remove('transform2');
      }, 200);
      this.audioEl.pause();
      this.stopped = false;
      clearInterval(this.interval);
      clearInterval(this.interval2);
      this.audioPlayerDiv.classList.remove('playAnimation');
      this.audioPlayerDiv.classList.remove('playAnimation2');
    }
  }

  // 停止功能
  stopFunction() {
    if (!this.audioEl.paused) {
      // 正在播放时停止
      this.playPauseBtn.classList.remove('transform');
      this.stopBtnDiv.classList.add('transform2', 'transform');
      setTimeout(() => {
        this.stopBtnDiv.classList.remove('transform', 'transform2');
      }, 200);
      this.resetPlayerState();
    } else if (this.audioEl.paused && !this.stopped) {
      // 已暂停但未停止时重置
      this.stopBtnDiv.classList.add('transform', 'transform2');
      setTimeout(() => {
        this.stopBtnDiv.classList.remove('transform', 'transform2');
      }, 200);
      this.resetPlayerState();
    } else if (this.stopped) {
      // 已停止时重置进度
      this.audioEl.currentTime = 0;
      this.percent = 0;
      this.progress.style.width = '0';
    }
  }

  // 重置播放器状态
  resetPlayerState() {
    clearInterval(this.interval);
    clearInterval(this.interval2);
    this.audioPlayerDiv.classList.remove('playAnimation', 'playAnimation2');
    this.audioEl.currentTime = 0;
    this.percent = 0;
    this.progress.style.width = '0';
    this.stopped = true;
    this.audioEl.pause();
  }
}

// 初始化所有播放器
document.addEventListener('DOMContentLoaded', () => {
  const playerContainers = document.querySelectorAll('.audio-player-container');
  playerContainers.forEach(container => new AudioPlayer(container));
});

关键改进点说明 #

1. 类封装：每个播放器都是独立的AudioPlayer实例，所有状态变量（比如this.percent、this.timer）都属于当前实例，不会和其他播放器冲突。
2. 容器内选择DOM：用container.querySelector()代替全局的document.querySelector()/getElementById()，确保每个实例只操作自己容器内的元素。
3. 事件绑定到实例：所有事件监听都绑定到当前实例的方法上，用箭头函数保证this指向正确的播放器实例。
4. 移除全局ID：所有元素都用类选择器，避免ID重复导致的DOM选择错误。

这样你就可以无限复制播放器容器，每个播放器都会独立工作，不需要重复写JavaScript代码，完美实现SoundCloud式的多播放器效果。

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