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

Привет, я Игорь Аникин, Frontend разработчик RUTUBE TECH. Медиадизайнер, специализируюсь на компьютерной графике. Увлекаюсь программированием более 15 лет. Веду Telegram-блог про новые медиа.

Это небольшой мастер-класс, как визуализировать звук двумя способами. Текст подойдёт любому читателю, которому интересна выразительная часть цифрового мира.

— Что такое креативное программирование?

Использование компьютера для создания изображений или звука. Например: realtime визуальные эффекты(аудиореактивная графика для музыкальных фестивалей), создание визуального искусства(генеративная графика) и дизайна, разработка художественных инсталляций, звукового искусства и даже рекламы.

Сегодня мы создадим WEB визуализатор звука(как winamp) + no code решение.

— Разбор проекта: визуализатор звука

—— AnalyserNode (WebAudio API)

Получаем данные из аудиосигнала:

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); // массив для записи данных

—— Отрисовка браузерным API (почти no code)

Мы преобразуем массив данных(полученный от анализа аудиосигнала) в градиент, чем мощнее сигнал на определённой частоте, тем ярче будет цвет на градиенте. Таким образом получается визуализация звука:

// Отрисовка частотных компонетов аудиосигнала через 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[i]); // нормализация данных
      // 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);// отрисовываем градиент на весь холст 
  }

Браво! Вы создали визуализатор звука! В левой части изображения отображены низкие частоты(саб и басс), в центре находятся средние частоты(соло скрипок/гитар, фортепиано, вокал) и в правой части мы видим верхние частоты(тарелки, шейкеры, хай хеты).

— NoCode решение (в среде визуального программирования TouchDesigner)

TouchDesigner позволяет быстро и легко прототипровать идеи и способен поддерживать production нагрузку(рендер 4к и более в реальном времени). Из минусов не портируется в веб(код на Python).

Для визуализации сигнала используется готовый компонент — нода Audio Spectrum CHOP

Я постоянно экспериментирую повторяя восприятие природы, либо цифровых продуктов.

Больше про медиадизайн у меня в канале: https://t.me/mediapancake

Подписывайтесь на этот блог и канал Смотри за IT, если хотите знать больше о создании медиасервисов. Там рассказываем об инженерных тонкостях и продуктовых находках, делимся видео выступлений и кадрами из жизни команд Цифровых активов «Газпром-Медиа Холдинга» таких, как RUTUBE, PREMIER, Yappy.