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

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


Фото 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, а его код — в официальном репозитории.

  • Как создавать музыкальные системы на 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. Можно сказать, что это живая сессия музыкального программирования.



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

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



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


Источник: https://habr.com/ru/company/audiomania/blog/464217/


Интересные статьи

Интересные статьи

Всем привет! Продолжаем дайджесты новостей и других материалов о свободном и открытом ПО и немного о железе. Всё самое главное про пингвинов и не только, в России и мире. Развенчан...
Устраивать конкурсы в инстаграме сейчас модно. И удобно. Инстаграм предоставляет достаточно обширный API, который позволяет делать практически всё, что может сделать обычный пользователь ручками.
История сегодня пойдёт про автосервис в Москве и его продвижении в течении 8 месяцев. Первое знакомство было ещё пару лет назад при странных обстоятельствах. Пришёл автосервис за заявками,...
В новом выпуске дайджеста альтернативный магазин приложений для iOS и тонкости публикации в старом Google Play, фреймворк автотетсирования и кодлабы по Kotlin, спрайтовые персонажи и 6 подкастов ...
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.