Waveurfer.js页面上的多个实例 [英] wavesurfer.js multiple instances on page

问题描述

我正在使用 wavesurfer.js ，当该实例上只有一个实例时，该方法就可以正常工作页，但是我有多个实例，并且不知道(因为我是javascript新手)如何将播放按钮链接到其他实例.

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?

推荐答案

由于我对javascript确实很陌生，所以这可能不是最好的"方法，但对我有用.

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

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>

这篇关于Waveurfer.js页面上的多个实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！