Legacy JS实现单页多个独立控制的可视化音频播放列表

问题根源 #

你当前代码的核心问题是audio变量没有使用let/var关键字声明，默认成为了全局变量：每次forEach遍历创建新播放器实例时，新的audio对象会覆盖全局作用域下的旧audio对象，最终所有播放器的控制逻辑都会指向最后创建的那个audio实例，就出现了点击一个播放器控制另一个的联动问题。

修复方案 #

只需要在initPlayer函数内创建audio对象时，加上let关键字声明为当前作用域的局部变量即可，修改代码如下：

function initPlayer() {
  // 加上let把audio声明为当前播放器实例的局部变量，避免全局覆盖
  let audio = document.createElement("audio")
  // 其余原有代码保持不变
  selectTrack(0)
  audio.loop = false

  playPauseButton.on("click", playPause)
  // ... 后续原有逻辑全部保留
}

兼容优化（适配Legacy JS/IE环境） #

如果需要兼容更老的IE版本，可额外做以下调整：

• 把代码中所有let关键字替换为var，IE不支持let块级作用域
• 现有代码全部使用普通函数声明，没有用到箭头函数等新特性，无需额外调整
• 可将各播放器内部重复的#app-cover、#player等ID改为类名，避免不符合HTML规范的问题，不影响现有逻辑运行。

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