Как с помощью js создать спектр аудио-трека?

Рейтинг: 0Ответов: 1Опубликовано: 30.06.2023

Столкнулся с проблемой поиска туториала по моей задаче - создать спектр аудио файла, чтобы в результате получилось что-то похожее на это изображение: введите сюда описание изображения

Где каждый пик - это средняя амплитуда громкости в конкретном участке аудио.

Во-первых, я не в точности не знаю, как это штука на самом деле называется (спектр?). Во-вторых, когда я пытаюсь найти туториал, я нахожу только обработку звука в браузере в реальном времени. Аудио играет, звук анализируется, а dom-элементы на это как-то реагируют. Мне же нужно совсем другое. Мне нужна асинхронная функция, в которую я бы загрузил трек, она там своими алгоритмами как-то его обработала, а на выходе отдала бы массив с числами, где каждое число можно было бы использовать для построения штрихов для картинки. Эта процедура должна выполниться 1 раз при загрузке приложения.

Как это сделать?

Ответы

▲ 0Принят

Есть абсолютно просто гайд на сайте mdn https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API

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

Есть библиотеки, которые помогают это сделать (честно говоря, не пользовался ими). Например https://www.npmjs.com/package/web-audio-graph

Плюс прочие другие гайды на эту тему - https://css-tricks.com/making-an-audio-waveform-visualizer-with-vanilla-javascript/

Дальше выбрать наиболее подходящий/понятный и доработать под свои нужды.