Audio Visualizer Example

[stucork]

I couldn’t find a good enough javascript library for this post

Audio Visualizer

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 impor…

So instead I used some inspiration from this javascript library:

GitHub - foobar404/wave.js: Audio visualizer library for javascript. Create...

To create something in Anvil

It makes heavy use of anvil.js to work with the browser’s native audio objects.

The bars changing is an anvil canvas object being redrawn at regular intervals based on frequency data represented in a python bytes object.

Login

Play with the live app: https://audio-visualizer.anvil.app/

[smuts1989]

Hi @stucork,

This is a really awesome little gadget you built! I’ve been trying to figure out how to use javascript and play audio in one of my apps, but then what you created here solved my problem. The following modules are very useful, but there is very little documentation on them. Is there somewhere that they are explained in more detail?

from anvil.js.window import (
navigator,
Audio,
AudioContext,
requestAnimationFrame,
cancelAnimationFrame,
URL,
)

Regards,
Stephan

[stucork]

Whenever I use browser features I tend to go for the MDN docs. They often have examples that are linked to.

One of the main challenges when using browser features through anvil.js is you might end up reading a lot of JavaScript to get familiar with the feature.