Как определить, когда форма волны загружена внутрь холста, с помощью Wavesurfer JS

Question

Мы создаем библиотеку звуков с волноводом, используя Wavesurf JS. Чтобы оптимизировать время загрузки, мы сохраняем волновые формы, сгенерированные на холсте, как изображение, поэтому нам не нужно генерировать их каждый раз при загрузке звука, и пока он отлично работает.

Но в чтобы сохранить изображение, нам нужно дождаться загрузки холста, и единственный способ, который мы нашли, - использовать setTimeout.

wavediv = WaveSurfer.create({
    container: '#canvasRender',
    waveColor: '#FFFFFF',
    progressColor: '#000000',
    cursorColor:'rgba(0,0,0,0)',
    splitChannels: true,
    height : 75,
    plugins: [
]
});

wavediv.load("sounds/test.mp3");
window.setTimeout(function(){
    var dataImg = wavediv.exportImage('image/png');
    saveWave(dataImg);
},600);

saveWave() - это просто функция, которая вызывает AJAX и отправляет данные на сервер, и мы их сохраняем, это отлично работает. Проблема в том, что мы не хотим полагаться на window.setTimeout(), потому что мы ограничены 0,6 секунды, как в этом примере (600), и если рендеринг занимает более 0,6 секунды, тогда сохраняется пустое изображение.

Итак, я ищу какую-то функцию обратного вызова или прослушиватель, который будет запускать saveWave() только после завершения загрузки формы волны.

пример:

wavediv.load("sounds/test.mp3", function(){
   var dataImg = wavediv.exportImage('image/png');
   saveWave(dataImg);
});

или

wavediv.ready(function () {
    var dataImg = wavediv.exportImage('image/png');
    saveWave(dataImg);
});

Я нашел нечто похожее в другом сообщении , но это не сработало:

wavediv.on("ready", function () {
    var dataImg = wavediv.exportImage('image/png');
    saveWave(dataImg);
});

Здесь та же проблема: https://github.com/katspaugh/wavesurfer.js/issues/1727 и был решен только с помощью setTimeout(): (