HTML5 Tutorials & More

Daft Punk Mashup in HTML5

It's quite inspiring to see more and more creative applications of HTML5 technologies. Today we have a very unique piece visualizing a mashup comprised of a number of Daft Punk tracks. Using HTML5 Canvas, the app displays the waveforms of the samples used in the composition in real time as they are added to the mix.

According to the author, "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."

  1. Audio
  2. Canvas