Get jazzy with web audio

Instead of a library, script, or app, this week I want to show you an awesome web demo.

Mark DiMarco recreated the opening credits to Birdman using JavaScript and the HTML5 Web Audio API. It works on mobile & desktop, natch.

So, how does it work? First, Mark prefetches an mp3 and uses a high pass filter to identify every loud cymbal & drum hit. These are the ‘peaks’ of the percussion track and there are 198 of them. Then, with an array of time codes corresponding to each peak, he calls window.setTimeout to show and hide individual elements on screen.

It’s a combination of timed performance and programing muscle. Take a look at the code, fork it, and try making your own cinematic intro!

Comments :)
2017 Neal Shyam