The Markup Melodium: A JavaScript framework which translates webpages into music
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
js
README.md
index.html

README.md

The Markup Melodium

Daniel Jones, October 2013

Humans and machines read the web in starkly different ways. To us, a webpage appears like a more whizz-bang version of a page of a magazine: fragments of writing and pictures that we read in a linear fashion, from left to right (in the English language, at least).

A machine such as a web browser reads the web in quite a different manner. It uses the page's HTML markup tags (<p>, <h1>, etc) to construct a tree structure, in which an element of the page might contain several "branches" within it. This paragraph (<p>), for example, contains a <code> branch and an italic <i> branch.

Conversely, each paragraph is contained within the document's <body>, which itself is inside the top-level <html> tag.

Structure and Sound

The Markup Melodium is a digital sound project which translates a web document's markup structure into a piece of music. It traverses a page's tree structure, creating a sequence of every HTML node contained within it, and transforms each node into a tiny fragment of sound. Each type of node is represented as a distinct perscussive sample, creating an emergent rhythm which reflects the document's own internal structure and rhythm.

It simultaneously examines the text contained within the page, just as we do as human readers. Each word is translated into a short melodic note, whose pitch properties are determined by the vowel content of the word.

Playing these percussive and melodic threads simultaneously gives a musical rendering of the page which reflects these two distinct ways of reading a page, the machinic and the human, with each in counterpoint to the other.

Examples

Sample pages as heard through the Markup Melodium.
Note that these require Web Audio support, which is featured in Safari 6+, Chrome 10+ and Firefox 25+ (requires Firefox Nightly build at present). (more information on Web Audio support)

You can create your own by remixing one of the above Thimbles. All of the magic happens inside this JavaScript code (coming soon to Github).

The name

This project was named in tribute to The Melodium, a 1938 musical instrument created by German physicist Harald Bode. Its pioneering modular design anticipated today's synthesizers by many decades. More about Bode's instrument designs (with samples).

The technology

The Markup Melodium was achieved using standards-compliant HTML5 web audio and Chris Wilson's AudioContext Monkey Patch for cross-browser compatibility. It was commissioned by Mozilla as part of a Mozilla Webmaker Fellowship.