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

в 13:18, , рубрики: Аудиомания, Блог компании Аудиомания, визуализация данных, звук, Разработка веб-сайтов, разработка игр

В прошлый раз мы подготовили для вас дайджест с открытыми библиотеками для визуализации аудиоконтента и решили найти материалы о том, как со всем этим работать. Получилась подборка руководств по теме для разработчиков веб-приложений или игр.

Как визуализировать звук в вебе: подборка тематических материалов и видеолекций с теорией и практикой - 1
Фото s_keller / Pixabay

В нашем блоге на Хабре —> Чтение на выходные: 65 материалов о стриминге, истории старого «музыкального железа», аудиотехнологиях и истории производителей акустики


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


  • Теория: методы выделения основного тона. Член команды разработчиков 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, а его код — в официальном репозитории.

  • Музыкальный инструмент с 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 — там объясняется, как «работал» звук в старых компьютерах.


Дополнительное чтение — из нашего «Мира Hi-Fi»:

Как визуализировать звук в вебе: подборка тематических материалов и видеолекций с теорией и практикой - 2 Как написать музыку, используя ООП
Как визуализировать звук в вебе: подборка тематических материалов и видеолекций с теорией и практикой - 3 Что за музыка была «зашита» в популярных ОС
Как визуализировать звук в вебе: подборка тематических материалов и видеолекций с теорией и практикой - 4 Музыкальное программирование — кто и почему им занимается
Как визуализировать звук в вебе: подборка тематических материалов и видеолекций с теорией и практикой - 5 Как ПК завоевал медиаиндустрию: обсуждаем Pro Tools и Media Composer
Как визуализировать звук в вебе: подборка тематических материалов и видеолекций с теорией и практикой - 6 Где взять аудиосемплы для ваших проектов: подборка из девяти ресурсов
Как визуализировать звук в вебе: подборка тематических материалов и видеолекций с теорией и практикой - 7 12 тематических ресурсов с треками по лицензии Creative Commons
Как визуализировать звук в вебе: подборка тематических материалов и видеолекций с теорией и практикой - 8 Innovation SSI-2001: история одной из самых редких звуковых карт для IBM PC
Как визуализировать звук в вебе: подборка тематических материалов и видеолекций с теорией и практикой - 9 Энтузиаст воссоздал звуковую карту Sound Blaster 1.0: чем примечателен проект


У нас на Хабре —> Карты звуков как способ погрузиться в атмосферу незнакомого города


Автор: Audioman

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js