Мы изучили несколько тематических тредов на GitHub, Hacker News и Reddit, посвященных инструментам для визуализации аудиоконтента. Рассказываем о часто упоминаемых открытых библиотеках и решениях, которые пригодятся разработчикам веб-приложений или игр.


^{Фото Pixabay / Pixabay License}

• Pizzicato. Для работы с аудиоконтентом в браузерах используется спецификация Web Audio, разработанная консорциумом W3C. У Web Audio API есть 28 интерфейсов для фильтрации, визуализации и управления каналами аудиозаписей. Библиотека для JavaScript Pizzicato расширяет эту функциональность — позволяет добавлять больше эффектов к мелодиям (тремоло, реверберация, эффект искажения quadrafuzz) и создавать на основе отдельных звуков новые композиции. Автор библиотеки представил проект, демонстрирующий её возможности — это приложение проигрывает мелодию в зависимости от числа коммитов пользователей GitHub.
• Processing.js. Библиотека для реализации базовых функций языка Processing. Его разработали в 2001 году для визуализации данных в вебе. Сегодня его используют тысячи художников, дизайнеров и разработчиков, в том числе для визуализации аудио. Для анимации библиотека использует JS, а для работы с изображениями — canvas. Изучить особенности языка помогут две книги (PDF) от его авторов — "Processing: A Programming Handbook" и "Getting Started with Processing".
• Peaks.js. Это — JavaScript-компонент для отображения графиков звуковых волн и взаимодействия с ним. Графики можно масштабировать и отмечать на них цветом различные смысловые части, например речь и музыку. Библиотеку разработали специалисты из BBC, они использовали компонент canvas из HTML5. Peaks.js умеет лишь отрисовывать графики по уже готовым данным и размещать их на странице сайта. Если нужно сгенерировать звуковую волну, можно обратиться к другим инструментам из экосистемы BBC: waveform-data для JS, audiowaveform для C++ и audio_waveform для Ruby.

• p5.js. Это — библиотека для визуализации, которую создала команда Processing в 2014 году. Она позволяет «рисовать с помощью кода» (создавать художественные элементы и анимации), где холстом выступает страница в браузере. У p5.js есть дополнительные библиотеки для интеграции с другими HTML5-объектами – текстом, видео, аудио или захватом изображения с веб-камеры. На официальном сайте проекта есть редактор, в котором можно оценить все возможности инструмента.
• pixi.js. 2D-движок для визуализации на базе canvas и WebGL, который поддерживает текстуры и спрайты. Авторы библиотеки позиционируют её как аналог Three.js, поэтому она подходит для создания сложных графических интерфейсов (например, музыкальных плееров) и визуализаций. Демо с «музыкальными» возможностями pixi.js можно найти на сайте codepen (нужно загрузить музыку с компьютера).
• sketch.js. Крошечная библиотека для создания арт-объектов на JavaScript — она весит всего два килобайта. Поддерживаются все методы рисования CanvasRenderingContext2D, WebGLRenderingContext и HTMLElement. На официальном сайте можно найти несколько примеров визуализаций, реализованных с помощью sketch. Документация со всей необходимой информацией для начала работы с инструментом есть на GitHub.
• Two.js. Универсальный API для рисования в Canvas, SVG или WebGL с уклоном в векторную графику. Подходит для работы в headless-среде и облаке. Примеры реализаций доступны по ссылке.
• Audio Waveform. Приложение для Linux и Mac OSX (Windows пока не поддерживается), которое работает из командной строки и генерирует данные о форме сигнала на основе аудиозаписи (в форматах MP3, WAV, FLAC или OGG). Для этого приложение формирует монодорожку, а затем рассчитывает минимальное и максимальное значение семплов. Данные сохраняются в форматах JSON, dat или PNG. После их можно передать библиотеке, которая отобразит график звуковой волны на сайте, например, уже упомянутой Peaks.js.

• Circular Audio Wave. JS-библиотека, которая визуализирует звуковые волны в виде кругового графика. Для их построения используется ECharts, а также данные о частотах и BPM мелодии. Демоверсии можно найти тут и тут.
• Cinder. Фреймворк C++ для генерации изображений, который создавался как конкурент для Processing.js. Инструмент позволяет работать как с 2D, так и 3D-графикой, имеет встроенные декодеры для WAV, MP3 и OGG, а также функции цифровой обработки сигналов (например, блоки нормализации и расчета среднеквадратических значений).
• 3D Music Visualizer. Простой визуализатор, построенный на базе Three.js и Web Audio API, который использует тригонометрические функции для создания фигур. Пример работы можно найти тут. Проект можно использовать в качестве референса при создании своего собственного «математического» визуализатора.