A ring shaped audio visualizer that uses and demos the ease of Web Audio API's analyzer node to generate its visuals.
I needed some kind of visual feedback for audio playback on a website in another project, so I created a small audio loop, fired up a browser-default player and started to fiddle around with the Web Audio API. As I found it to be pretty convenient to get something fancy looking up and running quite fast, I thought I'd drop it as a demo here.
Pretty straightforward, too see it in action:
- Download, unzip, open in Chrome (other Chromium based browsers might work, too)
After that, you can pretty much copy the bits and pieces from the provided index.html:
- Have an
<audio>element present withid='player' - Have a
<div>withid='visualizer'present (will be replaced) - Drop the script right at the end of your
<body>-section with:<script src="visualizer.js" type="application/javascript"></script>
That's about it. Should work on <video> elements, too. There's also a way to hook other players up (e.g. _video.js), by grabbing their child-video-element and passing it to the visualizer.
Grab some bits from the code and remix it!
Some minor things I noticed:
- Browsers are picky about video and audio autoplay. If you try to use this visualizer e.g. on a
<video>element, you might get yourself into the situation having to manually resume the audio context. In that case, resume the audio context before calling the visualizer'sinitialize()method (just kick it out of the .js and call it manually). - I ran into some trouble hooking up more than one analyzer node at the same time. Could be gone by now.
The Web Audio API and the JS language level I targeted make browser compatibility a definitive issue:
- I just fired this up in Chrome 87 and Firefox 84 and it worked, which was good enough for me
- I initially had the visualizer wrapped in a class making use of private fields, which I found to be cleaner, but removed it for Firefox compatibility
- Safari seems to silently ignore either the analyzers output, or has trouble connecting the input to the player element. Either way, it just draws a static ring.
If you like what I did, feel free to give me some credit, leave me a star at my GitHub repo, visit my homepage or hit me up on social media!