r _Web.log

tag: javascript

The Markup Melodium

I was recently invited by Mozilla to be a fellow on their Webmaker program, an excellent initiative to foster web literacy. As part of the fellowship, I was asked to create something which exploited the affordances of their maker tools.

I was drawn to the immediacy of Thimble, a browser-based interface to write web code and immediately see the results. I began pondering the potential for using Thimble as a kind of live coding environment: could an HTML document be translated into a piece of music which could be edited on-the-fly, hearing an immediate reflection of its structure and contents?

The outcome is this: The Markup Melodium. Using jQuery and Web Audio, it traverses the DOM tree of an HTML page and renders each type of element in sound. In parallel, it does likewise for the text content of the page, developing the phoneme-to-tone technique we used in The Listening Machine.

In way of example, hear Lewis Carroll's Jabberwocky as rendered by the Melodium. To explore the basic elements, here is a short composition for the Melodium. And the really exciting part: using Thimble's Remix feature, you can clone this basic composition and immediately begin developing your own remix of it in the browser, before publishing it to the world.

As the Markup Melodium is implemented through pure JavaScript, it's also available as a bookmarklet so that you can sonify arbitrary web pages.

Drag the following link to your browser's bookmark toolbar: Markup Melodium.

And, of course, all of the code is available on github.

The name is in tribute to The Melodium, a 1938 musical instrument created by German physicist Harald Bode, whose pioneering modular designs anticipated today's synthesizers by many decades


Quell the ceaseless anguish of unordered sequences with A-Z.js, a Javascript bookmarklet to immediately sort any webpage into alphabetical order.

ubuweb alphabeticized

The source code is also available on github: A-Z.js

chiptune.com: A web-based Amiga Workbench emulator

K http://www.chiptune.com/

chiptune.com is a stunning, fully-functional web-based emulation of the classic Amiga Workbench OS. It's entirely written in Javascript by Christophe Résigné, as part of the new Chrome Experiments showcase of dynamic web apps intended for Google's Chrome browser. Despite this, it also works happily in Firefox and Safari, which is just as well given Chrome's continued lack of OS X support.

I was particularly happy to discover it even includes this old friend...

Chiptune failure