Generative Music

Continuing my HTML5 and canvas experiments, I’ve put together a generative music system. Essentially, a series of particles move across a field, occasionally triggering sounds — the sound triggered depends on their location in the field.

There is, of course, a little bit more to it than that. Under the hood, I’ve got a series of HTML5 Audio objects that are used to provide polyphonic audio using a simple round-robin algorithm (I encoded the audio in OGG, so you’ll need to use an OGG-friendly browser, like Firefox). The particles are much simpler than those in my previous canvas dalliance, in that they don’t swarm, and their motion is more linear.

4 thoughts on “Generative Music

  1. Nicholas says:

    Very nice. One note: with the default verbosity, I was getting virtually no sound generation at all. Had to put it up to .1 or .2 ish.

    But nice!

  2. Nicholas says:

    Hmmm… now it works.

    And BTW: Chrome also seems to be an ogg-friendly browser. In fact, Chrome still seems to have the upper hand speed wise over Firefox. (Now, if only they could stop Chrome from crashing every few minutes!)

  3. jason says:

    this is super cool! is there any way to get it to work on IOS safari? the canvas works but the audio no worky

    1. Barry van Oudtshoorn says:

      Glad you like it, Jason! I’d like to revisit it at some stage and rework it — could be a chance to get the audio working in iOS at the same time. Back when I put this together, though, support for HTML5 audio was… spotty — so I didn’t really spend too much effort on mobile. 🙂

      I had a quick look at your project at — very cool stuff! I’ll have to spend some time delving into it during the week. 😀


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.