Проблемы с поиском местоположения в аудио с использованием библиотеки Waveform. js в мультитрековой установке - PullRequest
Новая
       64

Проблемы с поиском местоположения в аудио с использованием библиотеки Waveform. js в мультитрековой установке

1 голос
/ 28 апреля 2020

Я использую библиотеку wavesurfer. js для создания многодорожечного плеера. (https://wavesurfer-js.org/)

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

Тогда мой микшер. 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);

buttons.pause.addEventListener("click", function(){
    for(var i=0; i<audiofiles.length; i++){spectrum[i].pause();}
    buttons.pause.disabled = true;
    buttons.play.disabled = false;
}, false);

buttons.stop.addEventListener("click", function(){
    for(var i=0; i<audiofiles.length; i++){spectrum[i].stop();}
    buttons.pause.disabled = true;
    buttons.play.disabled = false;
    buttons.stop.disabled = true;
}, false);

Моя проблема заключается в том, когда я пытаюсь найти местоположение в форме сигнала на любом треке в этом разделе кода: 

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

// ---- Edit 1-- - //

console.log(i); дал мне «3» здесь, в консоли. Благодаря одному ответу я изменил это на: 

spectrum[i].on('seek', function (position) {
    for(var j=0; j<audiofiles.length; j++){
        spectrum[j].seekTo(position);
    }
});

Однако поиск позиции просто повторно вызывает ту же самую функцию поиска, пока я не получу ошибку Maximum call stack size exceeded. Любые идеи, как обойти это?

// ---- Изменить 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);
        }
    }
});

1 Ответ

2 голосов
/ 28 апреля 2020

Вы спрашиваете о позиции выбранного спектра? попробуйте это - если это работает? 

spectrum[i].on('seek', function (position) {
     console.log(position)
});

Как правило, события также имеют аргументы события, поэтому присоединение аргумента события может дать вам более глубокое понимание и контроль над тем, что вам нужно сделать.

...