title: Dynamically create multiple wavesurfer objects with unique names
body: <p>Not sure I'm wording this correctly but here is what I'm trying to do.</p>
  
  <p>I am using a function to render multiple instances of <a href="https://wavesurfer-js.org/" rel="nofollow noreferrer">wavesurfer</a> on a page.</p>
  
  <p>Out of the box this is straight forward, as you just declare each separate instance of wavesurfer :</p>
  
  <pre><code>var wavesurfer1 = WaveSurfer.create({
    container: domEl,
    barWidth: 3,
    .....
  
  var wavesurfer2 = WaveSurfer.create({
    container: domEl,
    barWidth: 3,
    .....
  </code></pre>
  
  <p>But I'm preloading JSON stored waveform data and NOT loading any audio file at page load, only when a user clicks the play button should the audio file load. Also the amount of instances and their id's will be created dynamically.</p>
  
  <p>I've got the logic working but I'm having trouble targeting each unique instance of wavesurfer as, well, they are not unique - hence my question, and I can't find any information on the official site (or git) about targeting individual instances. I would assume that it's possible by the <code>container</code> but can't find any info about how to do this, so I'm trying it another way.</p>
  
  <p>In the function that renders each instance of wavesurfer we have this (<code>domEl</code> is being passed into the function and creates a unique <code>div</code> and <code>id</code> for each waveform container) :</p>
  
  <pre><code>var wavesurfer = WaveSurfer.create({
    container: domEl,
    barWidth: 3,
    waveColor: '#CCC',
    progressColor: 'white',
    backend: 'MediaElement',
    mediaType:'audio',
    height: 80,
    cursorColor: 'white',
    responsive: true,
    hideScrollbar: true
  });
  </code></pre>
  
  <p>And the function that loads the actual audio :</p>
  
  <pre><code>$('.m-btn-player').on('click', function() {
  
    id = $(this).data("id");
    var url = "/play?id="+id;
    wavesurfer.load(url);
    wavesurfer.play();
  
  })
  </code></pre>
  
  <p>This works, but as each instance of wavesurfer is declared as <code>wavesurfer</code> it loads the audio into every single instance no matter which play button is clicked.</p>
  
  <p>What I thought I could do was declare each instance of wavesurfer in the render function with a dynamically generated name i.e :</p>
  
  <pre><code>// `id` is passed to the function
  
  var wavesurfer+id = WaveSurfer.create({
  container: domEl,
  barWidth: 3,
  ....
  </code></pre>
  
  <p>Then :</p>
  
  <pre><code>wavesurfer+id.load(url);
  wavesurfer+id.play();
  </code></pre>
  
  <p>But this doesn't work (and I don't even think it's possible from what I've read about dynamic variable names).</p>
  
  <p>I've also read that I should possibly be using hashmaps for something like this but have no idea how to use them, so if that is the case, or you can see another way I can make this work I would really appreciate some pointers.</p>
  
  <p>If this approach is entirely wrong how do I target multiple instances of wavesurfer without declaring the object name for each one? I can't find anything that explains how to do this anywhere.</p>