The Ultimate Music Toy (UMT) is a music composition system that lets you interactively change the composition while it's playing, and immediately hear the results!

It runs in the web browser and is written entirely in Javascript and uses the WebAudio API in HTML5 to actually play the music.

Tested to work on Chrome but should work on any HTML5-compliant browser.

by Wayne Radinsky

Demo

There is a live demo at http://ultimatemusictoy.org/ .

Install

To install the source code from here, just download or clone and load umt.html into a web browser. Relavant libraries (such as jQuery) are all included, even though that's not really necessary.


Conventions

Goal of doing everything the simplest possible way.

- All UMT code must pass JSLint. No exceptions. JSLint is treated as the target language. This includes stylistic conventions. None of the default options for disabling checks are allowed. The comment line at the beginning of the code specifies all the JSLint flags that will be used, which is currently only one: browser: true.

- Modularity is achieved by prefixing all the functions with umt. Yes, this is more tedious than other methods, but it is the simplest possible way I could think of and unambiguous. All data is put into a single global variable called gUmt. This should eliminate variable name collisions if UMT is used as part of another project. In general, I tried to design the system using the simplest possible design decisions at each stage, so the code is as unambiguous as possible and as easy to understand as possible. (Not saying it's *actually* easy to understand, since there is a certain level of unavoidable complexity, only that an effort was made to make it easy and reduce ambiguity at every stage as much as possible.)

- The UI is done with only jQuery sliders. (And built-in HTML controls such as listboxes). There are no custom UI elements and no other UI elements in the system. This was partly for simplicity and partly because my primary focus has been getting the actual music composition working properly.

- Since jQuery sliders are shadowed in data variables (stored in gUmt.UIParams), the decision was made to shadow all UI imputs, and implement a function that transfers data *from* the shadowed variables to the UI -- this will make it possible to "load" settings saved earlier into the UI. If you develop an alternate UI for UMT you will need to implement this.