Динамически создавать несколько объектов waveurfer с уникальными именами

Question

Не уверен, что я формулирую это правильно, но вот что я пытаюсь сделать.

Я использую функцию для визуализации нескольких экземпляров waveurfer на странице.

Это прямо из коробки, так как вы просто объявляете каждый отдельный экземпляр waveurfer:

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

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

Но я предварительно загружаю сохраненные в JSON данные формы волны и НЕ загружаю аудиофайл при загрузке страницы, только когда пользователь нажимает кнопку воспроизведения, если аудиофайл загружается. Также количество экземпляров и их идентификаторы будут создаваться динамически.

У меня работает логика, но у меня проблемы с таргетингом на каждый уникальный экземпляр waveurfer, поскольку, ну, они не уникальны - отсюда мой вопрос, и я не могу найти никакой информации на официальном сайте (или git) о таргетинге отдельные экземпляры. Я предполагаю, что это возможно container но не могу найти никакой информации о том, как это сделать, поэтому я пытаюсь это по-другому.

В функции, которая рендерит каждый экземпляр waveurfer, мы имеем это (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();

})

Это работает, но так как каждый экземпляр waveurfer объявлен как wavesurfer он загружает звук в каждый экземпляр независимо от того, какая кнопка воспроизведения нажата.

Я думал, что смогу объявить каждый экземпляр waveurfer в функции рендеринга с динамически генерируемым именем, т.е.

// `id` is passed to the function

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

Затем:

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

Но это не работает (и я даже не думаю, что это возможно из того, что я прочитал о динамических именах переменных).

Я также читал, что, возможно, мне следует использовать хеш-карты для чего-то подобного, но я не знаю, как их использовать, поэтому, если это так, или вы можете увидеть другой способ, как я могу сделать эту работу, я был бы очень признателен за некоторые указатели.

Если этот подход совершенно неправильный, как мне нацелить несколько экземпляров waveurfer, не объявляя имя объекта для каждого? Я не могу найти ничего, что объясняет, как сделать это где-нибудь.

Answer 1

После долгих проб и ошибок я взломал его.

Вам нужно настроить массив объектов:

var wavesurfer = [];

А затем передайте каждый отдельный идентификатор в него при создании каждого экземпляра внутри вашей функции рендеринга:

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');

Затем вы можете настроить таргетинг на каждого игрока, используя идентификатор объекта, в этом случае идентификатор, переданный функции, был 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>