Как визуализировать звук в вебе: подборка тематических материалов и видеолекций с теорией и практикой

Теория и история

Теория: методы выделения основного тона. Член команды разработчиков Ableton, программы для студийной работы со звуком, разбирает несколько распространенных алгоритмов выделения основного тона (повторяющегося цикла звуковой волны) в музыкальных записях. Примерами могут быть: метод нулевого пересечения и метод, основанный на выявлении основной гармоники. Автор также приводит несколько материалов для дополнительного чтения, в которых разбираются усовершенствованные подходы к выделению основного тона. Статья может быть интересна тем, кто планирует писать музыкальное приложение, отображающее графики звуковых волн.

Краткая история синтезаторов. Это — видеозапись одного из выступлений на конференции Scotland JS. Редактор газеты Web Audio Weekly Крис Ловис (Chris Lowis) рассказывает, как развивались синтезаторы, и разбирает принципы их работы. Все это с примерами на JS.

Основы Web Audio API. Разработчики из Mozilla говорят о функциях Web Audio API — спецификации для управления аудиоконтентом в браузерах. Описаны как базовые вещи вроде взаимодействия с аудиобуферами, так и более продвинутые (например, визуализация звука). Много графиков, схем и примеров кода. Материал регулярно дополняется — его можно использовать как «настольный» справочник при разработке приложений.

8-bit Music Theory. Канал на YouTube, посвященный разбору звукового ряда в видеоиграх с точки зрения музыкальной теории. Например, в этом видео автор на примерах показывает, как музыка помогает создать атмосферу в игре Hollow Knight, а здесь речь идет об одной из финальных композиций в Dark Souls. Канал может пригодиться тем, кто пишет собственную игру. Тут можно подчерпнуть несколько идей для её музыкального сопровождения.

Практика

Исследуем возможности Web Audio API с библиотекой D3.js. D3.js — это набор инструментов для визуализации данных. Он включает в себя модули для построения геометрических фигур, управления загрузкой, форматированием и масштабированием данных, а также математические функции. Авторы материала рассказывают, как с его помощью строить графики звуковых волн. Пример работы приложения из статьи можно найти на GitHub Pages, а его код — в официальном репозитории.

Как создавать музыкальные системы на JavaScript. Глобальное руководство по работе с Web Audio. С его помощью автор воссоздает работы композиторов Стивена Райха и Брайана Ино — "It's Gonna Rain" и "Discreet Music" соответственно. Следовать руководству довольно просто (есть примеры, схемы и скриншоты) даже если вы незнакомы с Web Audio API.

Музыкальный инструмент с Web Audio API. Запись с JSConf, во время которой Стив Кинни (Steve Kinney), основатель школы разработчиков Turing School, показывает, как построить синтезатор в браузере на getUserMedia Web API и WebSockets. Он также рассказывает, как с помощью Web Audio API собрать музыкальный инструмент на Arduino.

Знакомство с p5.js. p5.js — это библиотека для визуализации, которая позволяет «рисовать с помощью кода». На видео её разработчик — Лорен Маккарти (Lauren McCarthy) — на примерах демонстрирует, как с помощью этого инструмента создавать художественные элементы и анимации. Если вы хотите самостоятельно оценить возможности p5.js, то на официальном сайте проекта есть специальный редактор.

Музыка из 8-битных игр на Web Audio API. Статья о том, как с помощью Web Audio API и фреймворка Tone.js воссоздать и визуализировать 8-битную музыку из Pac-Man, Super Mario Bros, Metroid, Kirby's Adventure и The Legend of Zelda. Прослушать получившиеся композиции, посмотреть код и при желании модифицировать его можно на CodePen. Чтобы было проще разобраться в исходниках, автор статьи рекомендует сперва посмотреть это видео на YouTube — там объясняется, как «работал» звук в старых компьютерах.

Как создать танцевальный трек при помощи Web Audio API. Запись выступления Пола Адено (Paul Adenot) — инженера из Mozilla, который работает над браузером Firefox и помогает W3C с оформлением спецификации Web Audio API. Пол разбирает основные составляющие techno-трека и показывает, как воссоздать его на JS. Можно сказать, что это живая сессия музыкального программирования.