wavesurfer.js 页面上的多个实例

Question

我正在使用 wavesurfer.js 当页面上只有一个实例时它工作正常，但我有多个实例并且不知道（因为我是一个 javascript 新手）如何link 播放按钮到不同的实例。

我只是需要一些帮助...这就是我目前所拥有的

    <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 的新手，这可能不是 "nicest" 的方式，但它对我有用。

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>

wavesurfer.js 页面上的多个实例

wavesurfer.js multiple instances on page

javascript

playback

html5-audio