Badass JavaScript

A showcase of awesome JavaScript that pushes the boundaries of what's possible on the web, by @devongovett.

MIDI.js: A SoundFont-based MIDI Sequencer in JavaScript

January 10th 2013

MIDI.js isn’t particularly new, but it just came up again and I haven’t talked about it before.  It is an entire MIDI sequencer written in JavaScript, from Soundfont to speakers using the Web Audio API.  There are a number of demos available on the website which show off the library, including simple MIDI players, visualizations, virtual instruments and more.

MIDI.js works by providing an API that you can use to create notes, chords, adjust dynamics and more.  It generates audio using something called a SoundFont, which is a file format containing samples for each note for one or more instruments.  These SoundFont files can be rather large as you might imagine, so you may see a loading progress indicator while the above demos load them.

Once the SoundFont has been loaded, MIDI.js needs a source of input.  This can be you, directly calling API methods via a virtual instrument, or taken from a MIDI file.  MIDI.js uses another library called jasmid, which can read the binary MIDI file and generate MIDI events which MIDI.js can then use to synthesize the sounds you hear from your speaker.

image

Since MIDI is note based rather than sound based, very interesting applications can be built with it.  As the above screenshot shows, one of the demos for MIDI.js is an app that could teach you piano music without needing to learn sheet music, much like tap-tap revenge or similar games.  You can also click directly on the keyboard to play notes directly.  All of the sound is being generated directly in JavaScript with a SoundFont and MIDI.js, which can be hard to remember because everything is so fast and natural feeling. And since it can use a high quality SoundFont rather than some tinny generation of the old days, it can actually sound like a real piano!  Of course, since it is using SoundFonts, changing the instrument out to be something other than a piano is also very easy.

Audio applications in JavaScript have been gaining popularity very quickly lately thanks to the Web Audio API, so it’s good to see someone tackling MIDI as that is a big part of modern audio systems.  The W3C’s WebMIDI will also enable more MIDI features in the browser, such as talking to hardware MIDI devices such as keyboards.  This will enable a whole suite of audio creation tools in the browser.

You can check out the MIDI.js demos (best in Chrome) linked from their homepage, as well as the code on Github.  I can’t wait to see more great MIDI related web apps in 2013!