Audio Visualizer

Hi @allysongoff and welcome to the forum,

For information on what can be serialized you can find it in the docs

Anvil Docs | Server Code


If you want real time feedback you’ll probably need to capture the devices audio which will likely require looking up javascript browser features since Anvil doesn’t have support for this natively.

Working with anvil.js can help and allows you to access all the javascript objects in Python code.

Anvil Docs | Using JavaScript

Often the most difficult part is reading the javascript documentation.

A client side approach would probably involve getting an audio stream from the device, turning that into frequency data (a bytes like object) at regular intervals. Then converting that data into a canvas visualization. Using the anvil Canvas component.

You may also be able to find a javascript library that already does this for you.
This one looks pretty close - GitHub - foobar404/wave.js: Audio visualizer library for javascript. Create dynamic animations that react to an audio file or audio stream.
But the current script doesn’t seem to have been updated to the latest version and is a little broken :disappointed:


If you don’t need realtime data and can instead use a file from the user’s device then you can use the file uploader component and send the media object to the server to be processed by your preferred python library.


2 Likes