Hello Anvil Community,
I’m new here, but I’m loving this project. My question is more conceptual than coding-specific, so I have not included anything with this question. So, something I would love to do with my app is add a minimalist real-time audio visualizer, essentially making a sound level meter that would let the user know that the noise level is too high for a recording.
I’m struggling to do this in python, because I don’t want to have it on the client-side; the server side can’t import the necessary python libraries (i.e. pyaudio; I have a free account). Also, uplink doesn’t work because I’m getting a serialization error. The other option is to use JavaScript, but I barely know any JavaScript at this point. I’ll learn it if I have to, but I would love someone to point me in the right direction. Upgrading my account at this point is not an option, but it hopefully will be in the future.
Thank you for your help!
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 
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