Music Animation Shows Off The Future of Music Experiences In The Browser

by chase. 0 Comments

Wildlife Control - HTML5 Music Animation

Wildlife Control have created an incredible music animation using HTML, CSS, JavaScript, and the SoundCloud API. The JavaScript and math required to put this thing together are quite impressive. The whole experience definitely made the song more enjoyable for me. I urge you to go look at the main script file, beautify it and enjoy. At first I thought they were probably using Popcorn.js but after reviewing the source, definitely not. They provide a great explanation over on their blog of how things work that I have pasted below. Check it out here.

We were tinkering around with the SoundCloud API late one night several weeks ago and realized we could use the timing events and track comments to make something cool. At the time, we were thinking it would be a quick little animated ASCII thing. After digging in a little more, we decided to go way bigger.

You can think of this video as a scripted visualization. Although the story is linear, certain elements are random, making each viewing unique. The scenes are rendered on a “pixel” grid of HTML divs. Every time we get a playback timing event from SoundCloud, we check if a new sixteenth note has passed, and if so, the JavaScript renders the appropriate sprites on the video frame. This keeps the action precisely timed with the audio. The sprites are JavaScript objects that specify which colors to use and how to arrange them. Since we need to keep things lightweight and efficient, the general strategy is to break the scenes down into reusable pieces and animate them on the fly using math.

To make it a little more interactive, we display the SoundCloud comments right on the video on the same pixel grid. You can connect your SoundCloud or Facebook account and post your own comments and see them on the video while it’s playing. We are very excited that this is possible. Gotta love SoundCloud. And math.

So yeah… this is what happens when drummers write JavaScript.

Source: http://wildlifectrl.com/post/14266142693/analog-or-digital-video