Como criar interações utilizando sons e imagens/vídeos/canvas via JS?

[dionarodrigues]

Fala pessoal!

Sabem como posso fazer um efeito parecido com esse site ?
Estou tentando descobrir qual é a melhor maneira de criar algo que faça uma imagem/vídeo/canvas interagir com sons. No caso desse site é um rosto que se mexe de acordo com os sons. Conhecem alguma biblioteca para fazer isso ou conseguem me dar uma direção sobre como alcançar esse tipo de efeito?

Tks. 😁

[RuanAragao]

Olá, grande @diogorodrigues! Não tenho tanta experiência com esse tipo de projeto, mas pelo que eu pude ver nesse que você postou, eles possuem um arquivo de áudio e uma animação 3D para cada áudio. Ou seja, eles chamam o áudio e sua animação em sincronia, e não o modelo é manipulado com base no audio. Exemplo: fala_42: audio("42.mp3"), animação("42.glb").

Para trabalhar com esse tipo de interação você pode usar three.js, Babylon.js...

Acredito que os colegas tenham bem mais informações práticas, mas espero ter dado uma luz.

[glauberm]

@diogorodrigues isso pode te ajudar: https://tympanus.net/codrops/2020/02/24/audio-based-image-distortion-effects-with-webgl/