javascript - 动态创建多个具有唯一名称的 wavesurfer 对象

不确定我的措辞是否正确，但这是我想要做的。

我正在使用一个函数在页面上呈现 wavesurfer 的多个实例。

开箱即用，这是直接的，因为您只需声明 wavesurfer 的每个单独实例:

var wavesurfer1 = WaveSurfer.create({
  container: domEl,
  barWidth: 3,
  .....

var wavesurfer2 = WaveSurfer.create({
  container: domEl,
  barWidth: 3,
  .....

但是我正在预加载 JSON 存储的波形数据，而不是在页面加载时加载任何音频文件，只有当用户单击播放按钮时才加载音频文件。此外，实例数量及其 ID 将动态创建。

我的逻辑正常工作，但是我无法定位 wavesurfer 的每个唯一实例，因为它们不是唯一的 - 因此我的问题是，我在官方网站(或 git)上找不到关于定位的任何信息个别情况。我认为 container 是可能的，但找不到有关如何执行此操作的任何信息，因此我正在尝试另一种方式。

在呈现 wavesurfer 的每个实例的函数中，我们有这个(domEl 被传递到函数中并为每个波形容器创建一个唯一的 div 和 id):

var wavesurfer = WaveSurfer.create({
  container: domEl,
  barWidth: 3,
  waveColor: '#CCC',
  progressColor: 'white',
  backend: 'MediaElement',
  mediaType:'audio',
  height: 80,
  cursorColor: 'white',
  responsive: true,
  hideScrollbar: true
});

以及加载实际音频的功能:

$('.m-btn-player').on('click', function() {

  id = $(this).data("id");
  var url = "/play?id="+id;
  wavesurfer.load(url);
  wavesurfer.play();

})

这是可行的，但是由于 wavesurfer 的每个实例都声明为 wavesurfer，因此无论单击哪个播放按钮，它都会将音频加载到每个实例中。

我认为我可以做的是使用动态生成的名称在渲染函数中声明 wavesurfer 的每个实例，即:

// `id` is passed to the function

var wavesurfer+id = WaveSurfer.create({
container: domEl,
barWidth: 3,
....

然后 :

wavesurfer+id.load(url);
wavesurfer+id.play();

但这不起作用(我什至认为从我读到的关于动态变量名的内容来看这是不可能的)。

我还读到，我可能应该将哈希图用于此类用途，但不知道如何使用它们，因此，如果是这种情况，或者您可以看到我可以完成这项工作的另一种方式，我将非常感谢您的指点。

如果这种方法完全错误，我该如何定位多个 wavesurfer 实例而不声明每个实例的对象名称？我找不到任何可以解释如何在任何地方执行此操作的内容。

最佳答案

经过多次反复试验，我破解了它。

您需要设置一个对象数组:

var wavesurfer = [];

然后在渲染函数中创建每个实例时将每个单独的 id 传递给它:

function render(id, selector, peaks, url) {

  var domEl = document.createElement('div');
  domEl.setAttribute("id", "t-"+id);
  document.querySelector(selector).appendChild(domEl);

  trackid = "t"+id;

  wavesurfer[trackid] = WaveSurfer.create({
    container: domEl,
    barWidth: 3,
    waveColor: '#CCC',
    progressColor: 'white',
    backend: 'MediaElement',
    mediaType:'audio',
    height: 80,
    cursorColor: 'white',
    responsive: true,
    hideScrollbar: true
  });

  // Make sure you reference each method the same way...

  wavesurfer[trackid].drawBuffer();
  wavesurfer[trackid].load(url, peaks, false); //false prevents preload of audio file

  return wavesurfer[trackid];
}

调用渲染函数:

render(1, ".tk1", [....], 'http://example.com/file.mp3');

然后你可以使用对象标识符来定位每个玩家，在这个例子中，传递给函数的 id 是 1 :

wavesurfer[t1].playPause();

所以一个用例可能是:

<div class="tk1">
  <button type="button" onClick="wavesurfer['t1'].playPause();">PLAY</button>
  <script>
  render(1, ".tk1", [-0.39,0.4,-0.9,0.91,-0.32,0.34,-0.95,0.98,-0.54,0.74,-0.9,0.91,-0.33,0.37,-0.96,0.98,-0.9,0.91,-0.79,0.76,-0.95,0.95,-0.88,0.87,-0.91,0.94,-0.55,0.6,-0.97,0.96,-0.43,0.43,-0.91,0.91,-0.51,0.4,-0.98,0.94,-0.55,0.76,-0.91,0.91,-0.33,0.37,-0.98,0.98,-0.39,0.41,-0.92,0.91,-0.31,0.34], 'http://example.com/file.mp3');
  </script>
</div>

<div class="tk2">
  <button type="button" onClick="wavesurfer['t2'].playPause();">PLAY</button>
  <script>
  render(2, ".tk2", [-0.39,0.4,-0.9,0.91,-0.32,0.34,-0.95,0.98,-0.54,0.74,-0.9,0.91,-0.33,0.37,-0.96,0.98,-0.9,0.91,-0.79,0.76,-0.95,0.95,-0.88,0.87,-0.91,0.94,-0.55,0.6,-0.97,0.96,-0.43,0.43,-0.91,0.91,-0.51,0.4,-0.98,0.94,-0.55,0.76,-0.91,0.91,-0.33,0.37,-0.98,0.98,-0.39,0.41,-0.92,0.91,-0.31,0.34], 'http://example.com/file2.mp3');
  </script>
</div>

关于javascript - 动态创建多个具有唯一名称的 wavesurfer 对象，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50569574/