Anatomy of a Mashup

Online visualizer reveals the intricacies of music mashups in real-time


What started as an early-aughts gimmick led by 2manydjs has since morphed into a full-blown pop-culture phenomenon with party animals like Girl Talk disseminating their name-that-sample form of music far and wide. For multilayered tracks where the original samples become indistinguishable, Web Technologist Cameron Adams developed the Anatomy of a Mashup, breaking down his own creation “Definitive Daft Punk” as an example to “reveal its entire structure: the cutting, layering, levels, and equalization of 23 different songs.”

visual3.jpg visual4.jpg

The online visualization tool breaks down and analyzes the complicated construction, demonstrating how individual sounds work together to form the whole in a diagram of rainbow-colored concentric rings. The beautiful animation lends a unique understanding of the intricacies of the particular mashup, joining the audio and visual for experiences not unlike “little slices of synchronous art, designed to please all of your senses.”


To make that direct connection between what unfolds on the screen with the art of the mashup, Adams built the site using the latest HTML5 and CSS3 technology so that the browser renders the song as it plays and evolves for a visual that performs in real-time. To learn more about the inventor and his Anatomy of a Mashup, check out his site, The Man in Blue.

via Information Aesthetics