在多轨设置中使用waveform.js 库在音频中寻找位置的问题

Question

我正在使用 wavesurfer.js 库来创建多轨播放器。（https://wavesurfer-js.org/）我的 HTML 非常简单：<div id="player"></div><div id="player_controls">    <button class="btn btn-sm btn-dark" disabled="disabled" id="btn_play"><i class="fas fa-play"></i></button>    <button class="btn btn-sm btn-dark" disabled="disabled" id="btn_pause"><i class="fas fa-pause"></i></button>    <button class="btn btn-sm btn-dark" disabled="disabled" id="btn_stop"><i class="fas fa-stop"></i></button></div><script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.3.7/wavesurfer.min.js"></script><script type="text/javascript" src="mixer.js"></script>那么我的mixer.js文件如下：var audiofiles = ["drums.wav","bass.wav","vocals.wav",];var buttons = {    play: document.getElementById("btn_play"),    pause: document.getElementById("btn_pause"),    stop: document.getElementById("btn_stop")};var spectrum = [];var ready = [];for(var i=0; i<audiofiles.length; i++){ready.push('false');}for(var i=0; i<audiofiles.length; i++){    spectrum[i] = WaveSurfer.create({        container: '#player',        progressColor: "#28a745"    });        spectrum[i].on('ready', function () {        ready.pop();        ready.push = 'true';        checkAllReady();    });        spectrum[i].on('seek', function () {        console.log(i);        // var currentProgress = spectrum[i].getCurrentTime() / spectrum[i].getDuration();        // for(var j=0; j<audiofiles.length; j++){            // spectrum[j].seekTo(currentProgress);        // }    });    spectrum[i].load('separations/'+audiofiles[i]);}function checkAllReady(){   if(!ready.includes('false')){buttons.play.disabled = false;}}buttons.play.addEventListener("click", function(){    for(var i=0; i<audiofiles.length; i++){spectrum[i].play();}    buttons.stop.disabled = false;    buttons.pause.disabled = false;    buttons.play.disabled = true;}, false);然而，寻找一个位置只是重新调用相同的寻找函数，直到我得到一个Maximum call stack size exceeded错误。任何想法如何解决这个问题？

Answer 1

您是在询问所选光谱的位置吗？试试这个——如果这行得通？

spectrum[i].on('seek', function (position) {

     console.log(position)

});

通常事件还带有事件参数，因此附加事件参数可以让您更深入地了解并控制您需要做什么。

Answer 2

解决者：

spectrum[i].on('seek', function(position){

    console.log(position);

    for(var j=0; j<audiofiles.length; j++){

        var currentProgress = spectrum[j].getCurrentTime() / spectrum[j].getDuration();

        if(currentProgress!=position){

            spectrum[j].seekTo(position);

        }

    }

});