Audio Visualizer Example

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

So instead I used some inspiration from this javascript library:

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.

https://anvil.works/build#clone:7NWU5VO5EGJQRNQZ=WLE4KSNBGUCODK65NAPSCWTW

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

9 Likes

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

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.

3 Likes

A post was split to a new topic: Anvil.js Audio error