Как визуализировать звук в вебе: подборка тематических материалов и видеолекций с теорией и практикой
Подборка руководств по теме для разработчиков веб-приложений или игр.
Теория и история
Член команды разработчиков Ableton, программы для студийной работы со звуком, разбирает несколько распространенных алгоритмов выделения основного тона (повторяющегося цикла звуковой волны) в музыкальных записях. Примерами могут быть: метод нулевого пересечения и метод, основанный на выявлении основной гармоники. Автор также приводит несколько материалов для дополнительного чтения, в которых разбираются усовершенствованные подходы к выделению основного тона. Статья может быть интересна тем, кто планирует писать музыкальное приложение, отображающее графики звуковых волн.
Это — видеозапись одного из выступлений на конференции Scotland JS. Редактор газеты Web Audio Weekly Крис Ловис (Chris Lowis) рассказывает, как развивались синтезаторы, и разбирает принципы их работы. Все это с примерами на JS.
Разработчики из Mozilla говорят о функциях Web Audio API — спецификации для управления аудиоконтентом в браузерах. Описаны как базовые вещи вроде взаимодействия с аудиобуферами, так и более продвинутые (например, визуализация звука). Много графиков, схем и примеров кода. Материал регулярно дополняется — его можно использовать как «настольный» справочник при разработке приложений.
Канал на YouTube, посвященный разбору звукового ряда в видеоиграх с точки зрения музыкальной теории. Например, в этом видео автор на примерах показывает, как музыка помогает создать атмосферу в игре Hollow Knight, а здесь речь идет об одной из финальных композиций в Dark Souls. Канал может пригодиться тем, кто пишет собственную игру. Тут можно подчерпнуть несколько идей для её музыкального сопровождения.
Практика
D3.js — это набор инструментов для визуализации данных. Он включает в себя модули для построения геометрических фигур, управления загрузкой, форматированием и масштабированием данных, а также математические функции. Авторы материала рассказывают, как с его помощью строить графики звуковых волн. Пример работы приложения из статьи можно найти на GitHub Pages, а его код — в официальном репозитории.
Глобальное руководство по работе с Web Audio. С его помощью автор воссоздает работы композиторов Стивена Райха и Брайана Ино — "It's Gonna Rain" и "Discreet Music" соответственно. Следовать руководству довольно просто (есть примеры, схемы и скриншоты) даже если вы незнакомы с Web Audio API.
Запись с JSConf, во время которой Стив Кинни (Steve Kinney), основатель школы разработчиков Turing School, показывает, как построить синтезатор в браузере на getUserMedia Web API и WebSockets. Он также рассказывает, как с помощью Web Audio API собрать музыкальный инструмент на Arduino.
p5.js — это библиотека для визуализации, которая позволяет «рисовать с помощью кода». На видео её разработчик — Лорен Маккарти (Lauren McCarthy) — на примерах демонстрирует, как с помощью этого инструмента создавать художественные элементы и анимации. Если вы хотите самостоятельно оценить возможности p5.js, то на официальном сайте проекта есть специальный редактор.
Статья о том, как с помощью Web Audio API и фреймворка Tone.js воссоздать и визуализировать 8-битную музыку из Pac-Man, Super Mario Bros, Metroid, Kirby's Adventure и The Legend of Zelda. Прослушать получившиеся композиции, посмотреть код и при желании модифицировать его можно на CodePen. Чтобы было проще разобраться в исходниках, автор статьи рекомендует сперва посмотреть это видео на YouTube — там объясняется, как «работал» звук в старых компьютерах.
Запись выступления Пола Адено (Paul Adenot) — инженера из Mozilla, который работает над браузером Firefox и помогает W3C с оформлением спецификации Web Audio API. Пол разбирает основные составляющие techno-трека и показывает, как воссоздать его на JS. Можно сказать, что это живая сессия музыкального программирования.
Источник : https://habr.com/ru/company/audiomania/blog/464217/
Читать больше