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

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

^[1]
^{Фото Pixabay ^[2] / Pixabay License}

Pizzicato ^[3]. Для работы с аудиоконтентом в браузерах используется спецификация Web Audio ^[4], разработанная консорциумом W3C ^[5]. У Web Audio API есть 28 интерфейсов для фильтрации, визуализации и управления каналами аудиозаписей. Библиотека для JavaScript Pizzicato расширяет эту функциональность — позволяет добавлять больше эффектов к мелодиям (тремоло ^[6], реверберация ^[7], эффект искажения quadrafuzz ^[8]) и создавать ^[9] на основе отдельных звуков новые композиции. Автор библиотеки представил ^[10] проект, демонстрирующий её возможности ^[11] — это приложение проигрывает мелодию в зависимости от числа коммитов пользователей GitHub.
Processing.js ^[12]. Библиотека для реализации базовых функций языка Processing. Его разработали в 2001 году для визуализации данных в вебе. Сегодня его используют тысячи художников, дизайнеров и разработчиков, в том числе для визуализации аудио ^[13]. Для анимации библиотека использует JS, а для работы с изображениями — canvas. Изучить особенности языка помогут две книги (PDF) от его авторов — "Processing: A Programming Handbook ^[14]" и "Getting Started with Processing ^[15]".
Peaks.js ^[16]. Это — JavaScript-компонент для отображения графиков звуковых волн и взаимодействия с ним. Графики можно масштабировать и отмечать на них цветом различные смысловые части, например речь и музыку. Библиотеку разработали специалисты из BBC, они использовали компонент canvas из HTML5. Peaks.js умеет лишь отрисовывать графики по уже готовым данным и размещать их на странице сайта. Если нужно сгенерировать звуковую волну, можно обратиться к другим инструментам из экосистемы BBC: waveform-data ^[17] для JS, audiowaveform ^[18] для C++ и audio_waveform ^[19] для Ruby.

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

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

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

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

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

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

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

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

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

Автор: Audioman

Источник ^[47]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/open-source/321094

Ссылки в тексте:

[1] Image: https://habr.com/ru/company/audiomania/blog/456386/

[2] Pixabay: https://pixabay.com/illustrations/audio-sound-waves-sound-frequency-3540254/

[3] Pizzicato: https://alemangui.github.io/pizzicato/

[4] Web Audio: https://en.wikipedia.org/wiki/HTML5_audio#Web_Audio_API_and_MediaStream_Processing_API

[5] W3C: https://ru.wikipedia.org/wiki/%D0%9A%D0%BE%D0%BD%D1%81%D0%BE%D1%80%D1%86%D0%B8%D1%83%D0%BC_%D0%92%D1%81%D0%B5%D0%BC%D0%B8%D1%80%D0%BD%D0%BE%D0%B9_%D0%BF%D0%B0%D1%83%D1%82%D0%B8%D0%BD%D1%8B

[6] тремоло: https://alemangui.github.io/pizzicato/#tremolo

[7] реверберация: https://alemangui.github.io/pizzicato/#reverb

[8] quadrafuzz: https://alemangui.github.io/pizzicato/#quadrafuzz

[9] создавать: https://alemangui.github.io/pizzicato/#create-group

[10] представил: https://dev.to/alemangui/comment/3c6e

[11] демонстрирующий её возможности: https://alemangui.github.io/Tonalhub/

[12] Processing.js: https://www.processing.org/

[13] для визуализации аудио: https://www.youtube.com/watch?v=XS62cBK9E7w

[14] Processing: A Programming Handbook: http://203.252.22.28/Tutor0/2017/SW/processingHandbook.pdf

[15] Getting Started with Processing: http://cmuems.com/resources/getting_started_with_processing.pdf

[16] Peaks.js: https://www.npmjs.com/package/peaks.js

[17] waveform-data: https://www.npmjs.com/package/waveform-data

[18] audiowaveform: https://github.com/bbc/audiowaveform

[19] audio_waveform: https://github.com/bbc/audio_waveform-ruby

[20] Jason Corey: https://www.flickr.com/photos/mrcolantuono1/8327996804/

[21] p5.js: http://p5js.org/

[22] есть редактор: https://editor.p5js.org/

[23] pixi.js: https://github.com/pixijs/pixi.js/

[24] найти на сайте codepen: https://codepen.io/TheBITLINK/pen/oLybmE

[25] sketch.js: https://github.com/soulwire/sketch.js

[26] официальном сайте: https://soulwire.github.io/sketch.js/

[27] есть на GitHub: https://github.com/soulwire/sketch.js/wiki/Getting-Started

[28] Two.js: https://two.js.org/

[29] доступны по ссылке: https://two.js.org/examples/

[30] Pixabay: https://pixabay.com/vectors/equalizer-sound-disco-audio-297867/

[31] Circular Audio Wave: https://github.com/kelvinau/circular-audio-wave

[32] BPM: https://ru.wikipedia.org/wiki/BPM_(%D0%BC%D1%83%D0%B7%D1%8B%D0%BA%D0%B0)

[33] тут: https://demo.kelvinau.net/circular-audio-wave/sunburst.html

[34] тут: https://demo.kelvinau.net/circular-audio-wave/circular-wave.html

[35] Cinder: https://libcinder.org/

[36] функции цифровой обработки сигналов: https://libcinder.org/docs/branch/master/namespacecinder_1_1audio_1_1dsp.html#ad4c4429495c3ca4e20875eaad8cb664a

[37] 3D Music Visualizer: https://github.com/Robinnnnn/visualizer

[38] тут: http://musicvisualizer.s3-website-us-west-2.amazonaws.com/

[39] Image: https://www.audiomania.ru/hot_price/

[40] Polk Audio S10: https://www.audiomania.ru/polochnaya_akustika/polk_audio/polk_audio_s10.html

[41] Audio-Technica ATH-E40: https://www.audiomania.ru/in_ear_headphones/audio-technica/audio-technica_ath-e40.html

[42] Где взять аудиосемплы для ваших проектов: подборка из девяти тематических ресурсов: https://www.audiomania.ru/content/art-6670.html

[43] 12 тематических ресурсов с треками по лицензии Creative Commons: https://www.audiomania.ru/content/art-6638.html

[44] Подборка онлайн-магазинов с Hi-Res-музыкой: https://www.audiomania.ru/content/art-6468.html

[45] Что было на первом iPod: двадцать альбомов, которые выбрал Стив Джобс в 2001 году: https://habr.com/ru/company/audiomania/blog/454980/

[46] Вышли на пенсию — обсуждаем когда-то популярные аудиогаджеты, которые уже «устарели»: https://habr.com/ru/company/audiomania/blog/449112/

[47] Источник: https://habr.com/ru/post/456386/?utm_campaign=456386&utm_source=habrahabr&utm_medium=rss

Нажмите здесь для печати.