Analysing the music of Daft Punk with help from HTML5 and CSS3

17 May 2011

Sydney based Web Technologist Cameron Adams has put together “Anatomy Of A Mashup” a mashup/data visualisation of Daft Punk music with HTML5 and CSS3 (no Flash…), using the canvas and audio elements, plus transforms and transitions.

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.

While Adams recommends viewing the mashup with Chrome, I found it worked quite well with Firefox 4.

Originally published Tuesday 17 May 2011, with subsequent revisions, updates to lapsed URLs, etc.