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

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


    Фото 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»:

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



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


    • +15
    • 3,1k
    • 2
    Аудиомания
    233,93
    Одна из крупнейших Hi-Fi, High End компаний в СНГ
    Поделиться публикацией

    Комментарии 2

      0
      Спасибо за подборку, теперь мне будет, что почитать
        0
        теперь можно сделать свой Guitar Hero, спасибо)

        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

        Самое читаемое