Lab ·
Frequency analyzer with WebAudio API
An animated SVG boombox which analyses tracks and reacts by displaying the displaying the frequency data in a bar chart and expanding the speakers.
In 2017, I was tasked with building something involving the WebAudio API (can't remember what it was). Since I had no prior experience with this API, I decided to dive into it and have some fun. I created a boombox, which plays iconic samples from 80s and 90s hip hop. The script uses the WebAudio API to analyze the tracks real-time and display the frequency data in a bar chart.
The speakers expand and contract based on the frequency data, because why not?
Click the play button below to see the boombox in action 🎵
Loading...
Built with Vanilla JS, Snap and SVG