May 12, 2011

An Awesome HTML5/CSS3 Visualization of the “Definitive Daft Punk” Mash-up

daft-punk-mashup-visual

Back in December, I wrote about The Man in Blue’s cool “Definitive Daft Punk” mix, which mashed twenty-two Daft Punk songs up into a single six-minute mix. And now, the Man in Blue has returned with something even cooler, a lovely visualization of “Definitive Daft Punk” rendered entirely in HTML5 and CSS3. From the related blog entry:

In order to explain the layering and interplay that goes into something like a Girl Talk album or The 139 Mix Tape I decided to take my own mashup of Daft Punk’s discography — Definitive Daft Punk — and reveal its entire structure: the cutting, layering, levels and equalisation of 23 different songs. By dividing up the sound data for each song and computing its appearance in realtime, the resulting visualisation gives you an understanding of the unique anatomy of this particular mashup.

The entire piece is composed from the latest HTML5 and CSS3 technology (canvas, audio, transforms & transitions) so you’ll need a newer browser to view it in. I recommend Chrome because it pulls off the best performance with my mangled code. All of the waveform and spectrum visualisation is performed in realtime, so your browser is rendering a music video on the fly!

It’s truly a beautiful, awe-inspiring work, not just aesthetically but also technically: it shows what you can do in the browser without any Flash (though Flash was used to create the data of the MP3’s audio spectrum used by the visualization).

Archives

Best of Opus

Music, Movie & Anime Reviews

About Opus

Support Opus