Как в яво-скрипте нарисовать спектрограмму stft?

Question

mib @mib

Как в яво-скрипте нарисовать спектрограмму stft?

Здравствуйте!
Подскуажите пожалуйста, как нарисовать вот те красивые графики из
Short-time Fourier transform

Я пытался использовать stft npm модуль, но не до конца понимаю, что он возвращает, у меня получаются картинки с интерференцией, как в двухщелевом эксперименте :)

Сейчас я сделал массив из тех же данных, что и в википедии: по 5 секунд синусоиды разной частоты, фреймрейт 400 примерно вот так:

const { createCanvas, loadImage } = require('canvas')
const canvas = createCanvas(1920, 1080)
const ctx = canvas.getContext('2d')

//https://github.com/mikolalysenko/stft
var shortTimeFT = require("stft")

// начало кода из примера stft//
function onFreq(re, im) {
  //Frequency stuff.  Process it here
  //Видимо приходит реальная и комплексная часть преобразования, 
  //мне нужно рисовать "re" ?

  istft(re, im);
  //но зачем-то вызывается обратное преобразование ?
}

function onTime(v) {
  //Got data, emit it here
  console.log("out frame:", v)
  //что это за данные, может быть обратно мои синусоиды ?
}

var stft = shortTimeFT(1, 1024, onFreq)
var istft = shortTimeFT(-1, 1024, onTime)

// конец кода из примера //

ctx.strokeStyle = '#909090'
ctx.beginPath()
ctx.moveTo(0, 0)

var arr = [];
var SampleRate = 400.0

//синусоиды разной частоты
for (var t = 0.0; t < 20.0; t += 1.0/SampleRate ) {
    var y = 0;
    if (t < 5) {
        y = Math.cos(2.0 * Math.PI * (10 * t))
    } else if (t < 10) {
        y = Math.cos(2.0 * Math.PI * (25 * t))
    } else if (t < 15) {
        y = Math.cos(2.0 * Math.PI * (50 * t))
    } else if (t < 20) {
        y = Math.cos(2.0 * Math.PI * (100 * t))
    }

    ctx.lineTo(1920 / 20 * t, (y + 1.0) * 200)
    arr.push(y);
}

var window_size = SampleRate * 0.5; //коно по 0.5с

//Feed stuff into signal
var outp = Array.prototype.slice.call(stftPassThru(window_size, new Float32Array(arr)))
//
// здесь пропущена отрисовка спектрограммы из outp , 
//
ctx.stroke();

document.body.appendChild(canvas);

Помогите пожалуйста разобраться с примером https://github.com/mikolalysenko/stft, или может быть посоветуйте другой модуль/способ ?
Может быть у кого-то есть пример как рисовать спектрограмму на явоскрипте ?
Спасибо !

P.S. У меня покамест получается вот такое:
https://qna.habr.com/#