Как сделать рисунок для аудиодорожки?

Question

[Игорь Васильев]

Здравствуйте.
--
Я давно ищу вот такое решение: https://app.soundstripe.com/songs/9063
Чтобы я мог загрузить музыку на свой сайт и скрипт смог отрисовать рисунок аудиодорожки
чтобы я мог кликнуть в любое место и перемотать музыку до этого места.
Ремарка, работать с аудио и видеофайлами я могу.
Пробелы только в проигрывании плейлистов, чтобы при клике на другую дорожку прерывалась игра предыдущей музыки и начала звучать выбранная мелодия. Но сложнее всего найти именно возможность рисовать эти штуки "рисунок" аудиодорожки.

Может кто знает или использовал какое-то готовое решение под эту задачу ?
Мне это нужно под JavaScript, ну или под React JS, Next JS (Можно и под Vue JS), главное дать подсказку, направление, как это сделать.

Заранее благодарю всех кто захочет помочь или откликнется.

-----
P.S. Что за сайт, понятия не имею, случайно наткнулся на него, показал именно его, потому что там максимально то, что я хочу сделать.

Answer 1

[Сергей Соколов]

Мне это нужно под JavaScript

Почему картинка трека должна вычилсяться снова и снова, у каждого посетителя, причём только после полной загрузки каждого трека? Превьюшки волновой формы стоит один раз просчитать и сохранить на сервере.

Вариант 1. FFmpeg
Отрисовать их можно, например, с помощью ffmpeg — фильтра "waveform" (документация фильтра и примеры):

ffmpeg \
  -i music.mp3 \
  -filter_complex "aformat=channel_layouts=mono,showwavespic=s=640x120" \
  -frames:v 1 \
  waveform.png

Вариант 2. BBC
утилита от Би-Би-Си: bbc/audiowaveform — делает то же самое или отдаёт пиковые данные в JSON. От них же для фронта bbc/peaks.js

Answer 2

[Pavel]

https://developer.mozilla.org/ru/docs/Web/API/Web_...