Открытые библиотеки для визуализации аудиоконтента

в 8:55, , рубрики: open source, аудиоконтент, Аудиомания, Блог компании Аудиомания, Веб-разработка, звук, Разработка веб-сайтов, разработка игр, разработка мобильных приложений, распродажа

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

Открытые библиотеки для визуализации аудиоконтента - 1
Фото 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.

Открытые библиотеки для визуализации аудиоконтента - 2
Фото Jason Corey / CC BY

  • 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.

Открытые библиотеки для визуализации аудиоконтента - 3
Фото Pixabay / Pixabay License

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


Открытые библиотеки для визуализации аудиоконтента - 418 июня в «Аудиомании» стартует распродажа техники. Отдаем виниловые проигрыватели, стереоусилители, полочную и напольную акустику, а также внутриканальные наушники с большими скидками до 70%. Например, колонки Polk Audio S10 можно будет забрать за 14 900 руб., а наушники Audio-Technica ATH-E40 за 6 490 руб.

Hot AUDIOSALE 2019 — это отличная возможность купить себе аудиогаджет, который вы давно присматривали.


Другие наши подборки:

Открытые библиотеки для визуализации аудиоконтента - 5 Где взять аудиосемплы для ваших проектов: подборка из девяти тематических ресурсов
Открытые библиотеки для визуализации аудиоконтента - 6 12 тематических ресурсов с треками по лицензии Creative Commons
Открытые библиотеки для визуализации аудиоконтента - 7 Подборка онлайн-магазинов с Hi-Res-музыкой
Открытые библиотеки для визуализации аудиоконтента - 8 Что было на первом iPod: двадцать альбомов, которые выбрал Стив Джобс в 2001 году
Открытые библиотеки для визуализации аудиоконтента - 9 Вышли на пенсию — обсуждаем когда-то популярные аудиогаджеты, которые уже «устарели»


Автор: Audioman

Источник

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


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