页面上的wavesurfer.js多个实例

Question

当页面上只有一个实例时，我使用的wavesurfer.js很好，但是我有多个实例，并且不知道如何将play按钮链接到不同的实例(因为我完全是javascript新手)。

我只是需要一些帮助..。到目前为止，这就是我所拥有的

    <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>

我环顾四周，想象着这样的事情。

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

有人能把我引向正确的方向吗？

Answer 1

由于我对javascript非常陌生，这可能不是“最好”的方法，但它对我有效。

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

然后你可以用这样的方法来控制玩家：

<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>