wavesurfer.js multiple instances on page

Question

I'm using wavesurfer.js which works fine when there is only one instance on the page, but I have multiple instances and have no idea (as I am a total javascript novice) how to link the play button to different instances.

I just need some help... this is what I have so far

    <div id="demoOne">
          <div id="trackOne">
            <script type="text/javascript">
            var wavesurfer = Object.create(WaveSurfer);

            wavesurfer.init({
                container: document.querySelector('#trackOne'),
                waveColor: '#fff',
                progressColor: '#000',
                cursorColor: '#333'
            });
            wavesurfer.load('audio/location01.mp3');
            </script>
          </div>
          <div class="controls">
            <button class="btn" data-action="play">
                <i class="glyphicon glyphicon-play"></i>
            </button>
          </div>
        </div>
        <div id="demoTwo">
          <div id="trackTwo">
            <script type="text/javascript">
            var wavesurfer = Object.create(WaveSurfer);

            wavesurfer.init({
                container: document.querySelector('#trackTwo'),
                waveColor: '#fff',
                progressColor: '#000',
                cursorColor: '#333'
            });
            wavesurfer.load('audio/location02.mp3');
            </script>
          </div>
          <div class="controls">
            <button class="btn" data-action="play">
                <i class="glyphicon glyphicon-play"></i>
            </button>
          </div>
        </div>

I have looked around and imagined something like this

<button onclick="document.getElementById('trackOne').play()">Play</button>

Can anyone steer me in the right direction?

Answer 1

Since I'm really new to javascript, this might not be the "nicest" way, but it worked for me.

main.js

var sample1 = Object.create(WaveSurfer);

document.addEventListener('DOMContentLoaded', function () {
var options = {
    container     : document.querySelector('#sample1'),
    waveColor     : 'violet',
    progressColor : 'purple',
    cursorColor   : 'navy'
    };

    sample1.init(options);

    sample1.load('media/sample1.3gp');
});

var sample2 = Object.create(WaveSurfer);

document.addEventListener('DOMContentLoaded', function () {
var options = {
    container     : document.querySelector('#sample2'),
    waveColor     : 'violet',
    progressColor : 'purple',
    cursorColor   : 'navy'
    };

    sample2.init(options);

    sample2.load('media/sample2.3gp');

});

trivia.js

var GLOBAL_ACTIONS = {
'playSample1': function () {
    sample1.playPause();
    },
'playSample2': function () {
    sample2.playPause();
    }
};

document.addEventListener('DOMContentLoaded', function () {
[].forEach.call(document.querySelectorAll('[data-action]'), function (el) {
    el.addEventListener('click', function (e) {
        var action = e.currentTarget.dataset.action;
        if (action in GLOBAL_ACTIONS) {
            e.preventDefault();
            GLOBAL_ACTIONS[action](e);
        }
    });
  });
});

Then you can control the players with something like this:

<div class="controls">
  <button class="btn btn-default" data-action="playSample1">
    <i class="glyphicon glyphicon-play"></i> /
    <i class="glyphicon glyphicon-pause"></i>
  </button>
</div>