Isolution666
@Isolution666
творческая личность

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

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

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

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

-----
P.S. Что за сайт, понятия не имею, случайно наткнулся на него, показал именно его, потому что там максимально то, что я хочу сделать.
  • Вопрос задан
  • 184 просмотра
Пригласить эксперта
Ответы на вопрос 2
sergiks
@sergiks Куратор тега JavaScript
♬♬
Мне это нужно под JavaScript

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

Вариант 1. FFmpeg
Отрисовать их можно, например, с помощью ffmpeg — фильтра "waveform" (документация фильтра и примеры):
ffmpeg \
  -i music.mp3 \
  -filter_complex "aformat=channel_layouts=mono,showwavespic=s=640x120" \
  -frames:v 1 \
  waveform.png

61023f3556ca4251549381.png

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы