Креативное программирование: визуализация звука

const audioCtx = new AudioContext();
const FFT = audioCtx.createAnalyser();
const source = audioCtx.createMediaStreamSource(stream);
source.connect(FFT); // анализ
analyser.connect(audioCtx.destination); // вывод звука
const bufferLength = FFT.frequencyBinCount;
const dataArray = new Float32Array(bufferLength); // массив для записи данных

// Отрисовка частотных компонетов аудиосигнала через createLinearGradient
  function renderSpectrum(g) {
    g.strokeWeight(0);
    g.drawingContext.fillStyle = "black"; // цвет фона
    g.rect(0, 0, WIDTH, HEIGHT); // заливка фона
    const subSize = Math.floor(WIDTH * 0.02);
    const gradient = drawingContext.createLinearGradient(
      subSize,
      HEIGHT / 2,
      WIDTH * 2,
      HEIGHT / 2
    );
    FFT.getFloatFrequencyData(dataArray);
    levels = dataArray; // данные от анализа сигнала Быстрым преобразованием Фурье
    // создаем градиент из аудиоданных
    for (let i = 0; i < levels.length; i++) {
      const v = getValue(levels); // нормализация данных
      // const pos = getPos(i);
      const pos = linear_to_logarithmic(getPos(i));
      // чем мощнее сигнал(0-1) тем выше значение alpa в цвете градиента rgba
      gradient.addColorStop(pos, `rgba(255, 255, 255, ${v.toFixed(2)})`);
    }
    g.drawingContext.fillStyle = gradient; // устанавливаем полученный градиент как стиль заливки
    g.rect(0, 0, WIDTH, HEIGHT);// отрисовываем градиент на весь холст
  }