JS: подпрыгивающий DIV в такт под удары низких частот при прослушивании аудио-потока?

Question

[xmoonlight]

Всем, доброго вечера.

Как сделать при прослушивании аудио-потока, чтобы во время ударов/низких частот прыгал DIV?
Чистый front-end нужен!

Кто-нибудь реализовывал?

Спасибо за помощь за подсказки в реализации этой задачи.
UPD: кому интересно - добавил паузу и загрузку с http(s)-источников с соблюдением CORS: https://jsfiddle.net/xmoonlight/bn70a370/

Answer 1

[Дмитрий Литвиненко]

https://github.com/Okazari/Rythm.js + demo

Comments

[xmoonlight]

Дмитрий Литвиненко, Спасибо! Добавил в либу "паузу" (и управление URL-ами) и CORS для источников URL-ов.

Answer 2

[Константин Китманов]

WebAudio API

https://dzone.com/articles/exploring-html5-web-audio (демо: www.smartjava.org/examples/webaudio/example3.html ), ну а там уже div двигать должно быть не проблемой.

Comments

[xmoonlight]

Силу волны из спектра снять - это не проблема.
Проблема детектировать удар низов.

[Константин Китманов]

xmoonlight, то есть проблема найти пики?

Answer 3

[Владимир]

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

Comments

[xmoonlight]

Силу волны из спектра снять - это не проблема.
Проблема детектировать удар низов.

[Дмитрий]

xmoonlight, а в гугл больше не пускают?
по "js beat detection" куча готового кода
есть и где просто bpm ищут, есть где по частотам разным.

https://github.com/chrisguttandin/web-audio-beat-d...
https://github.com/stasilo/BeatDetector
https://github.com/processing/p5.js-sound/issues/34
и тп