动态创建带唯一标识的多个WaveSurfer实例并精准调用

你遇到的核心问题是用单个变量存储所有实例导致状态冲突，而动态变量名的写法在JS里是不合法的。下面给你两种最实用的解决方案，都是生产环境常用的：

方案一：用哈希表（对象）存储实例（推荐） #

这是最直观也最易维护的方式，用一个全局对象来管理所有WaveSurfer实例，每个实例用唯一ID作为键值。

步骤： #

1. 先声明一个全局对象用来存所有实例：

// 全局存储所有WaveSurfer实例
const waveSurferInstances = {};

2. 动态创建实例时，用每个音频的唯一ID作为键，把实例存入对象，同时预加载波形数据：

// 假设你有动态生成ID、容器和预加载波形数据的逻辑
function createWaveSurferInstance(id, domEl, preloadedWaveformData) {
  // 创建实例并存入全局对象
  waveSurferInstances[id] = WaveSurfer.create({
    container: domEl,
    barWidth: 3,
    waveColor: '#CCC',
    progressColor: 'white',
    backend: 'MediaElement',
    mediaType: 'audio',
    height: 80,
    cursorColor: 'white',
    responsive: true,
    hideScrollbar: true
  });

  // 页面加载时预加载波形（不加载音频）
  if (preloadedWaveformData) {
    waveSurferInstances[id].setWaveform(preloadedWaveformData);
  }
}

3. 点击播放按钮时，通过ID从对象中取出对应的实例，执行加载和播放：

$('.m-btn-player').on('click', function() {
  const id = $(this).data("id");
  const url = "/play?id=" + id;
  
  // 获取对应ID的实例
  const targetWaveSurfer = waveSurferInstances[id];
  if (targetWaveSurfer) {
    targetWaveSurfer.load(url);
    targetWaveSurfer.play();
  }
});

方案二：将实例挂载到对应的容器DOM元素上 #

如果不想用全局对象，也可以把WaveSurfer实例直接绑定到它的容器DOM元素上，通过按钮关联的容器就能找到对应实例。

步骤： #

1. 创建实例时，把实例挂载到容器元素的自定义属性上：

function createWaveSurferInstance(domEl, preloadedWaveformData) {
  const instance = WaveSurfer.create({
    container: domEl,
    // 其他配置项...
  });

  // 把实例绑定到容器元素上
  domEl.waveSurferInstance = instance;

  // 预加载波形数据
  if (preloadedWaveformData) {
    instance.setWaveform(preloadedWaveformData);
  }
}

2. 点击播放按钮时，找到对应的容器元素，取出实例操作：

$('.m-btn-player').on('click', function() {
  const id = $(this).data("id");
  const url = "/play?id=" + id;
  
  // 假设容器ID和按钮的data-id关联，比如wave-container-${id}
  const domEl = document.getElementById(`wave-container-${id}`);
  if (domEl && domEl.waveSurferInstance) {
    const targetWaveSurfer = domEl.waveSurferInstance;
    targetWaveSurfer.load(url);
    targetWaveSurfer.play();
  }
});

补充：关于预加载波形数据 #

WaveSurfer的setWaveform方法可以直接传入预生成的波形点数组（即你存储的JSON数据），页面加载时就能显示波形，完全不需要加载音频文件，完美匹配你的需求。如果你的JSON是用WaveSurfer的exportPCM方法导出的，直接传入即可。

为什么动态变量名不行？ #

在JavaScript中，var wavesurfer+id = ...这种写法是语法错误，JS不允许用字符串拼接的方式直接创建变量名。而用对象或DOM挂载的方式，本质是用键值对关联ID和实例，这才是JS中动态管理多个实例的正确姿势。

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