Question

我使用wavesurfer.js，当页面上只有一个实例时工作正常，但我有多个实例并且不知道（因为我是一个完整的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>

wavesurfer.js页面上有多个实例

1 个答案: