Generative Music

Canvas, HTML5 Audio and MooTools

Configuration
Entries in red can be set without restarting. Other entries require a page refresh.
What’s going on?

We start out with a number of audio samples – in this instance, we have eight notes from an ascending E melodic minor scale. We divide up our canvas into a series of cells. Each cell is assigned an audio sample and a colour.

To trigger these sounds, we create a series of particles, which move across the canvas, changing the x and y components of their velocities at the canvas boundaries. On each iteration of the particles’ movement, they may trigger a cell, playing a sound.

To simplify the playing of polyphonic sound, I've written a simple MooTools Class that controls a series of HTML5 Audio objects. This uses a basic round-robin method for playing sounds polyphonically.

All of the JavaScript is written using the MooTools framework.

Note: This example uses OGG samples, so I recommend viewing it with a recent version of Firefox.