#Recreating the Birdman opening credits with HTML5 Web Audio APIs
The opening credits to the 2014 Best Picture Birdman was exceptionally creative. The music is composed primarily of a standard jazz drum set, and for each beat or loud hit of the cymbal, letters would appear on the screen, slowly filling out sentences.
This is my attempt to recreate that effect using the Web Audio APIs available in most modern browsers.
To do this, we download an .mp3 and pass it through a filter to better isolate the louder drum and cymbal hits. Then we loop through the channel data, and based on an arbitrary threshold (for this project it was 0.22), we make a note of when that beat occurred in the track (1.445 seconds, for example).
Finally, after we have an array containing the timing of all the sound "peaks", we simply set a series of window.setTimeouts, each with a callback to update the UI.
Note: If this were a more Javascript intensive application, you might want to find something more precise than window.setTimeout.
Two great links to learn more about this approach:
The copyright to the track 'Get Ready' by Antonio Sanchez belongs to Antonio Sanchez