This post is about Jasmid – a simple midi synthesizer written in javascript by Matt Westcott/Gasmid. It started with his fake plastic cubes demo, so if you follow his blog posts, you might get to know a little more about its history and the demoscene (which nvidia calls underground digital art).

This library have also found its use in the experiments of my last two blog posts, but I think it was Michael Deal who first brought it to my attention, having utilized it in his various music projects.

For a few reasons, I wanted to write this post (even though lying in my drafts since last year). Firstly, to paraphrase Gasmid, the web isn’t getting enough of midi these days. (remember those days when you search for midis on the net?). Secondly, it’d be cool to introduce Jasmid as its a simple but cool audio project. Despite minimal documentation, the code pretty neat and self explanatory that one can learn a little stuff about midi and audio synthesis. Thirdly, I think I’m about to lose myself trying to juggling work and stuff, while getting distracting thinking and doing tons of random crazy ideas. So hopefully, writing helps a little to document the stuff I do and organize my mind before things gets really overwhelming!

So, to start off playing with Jasmid, I suggest you clone or download a copy of jasmid onto your computer. As with any pages with requires same origin AJAX calls, run them on a web server to test them. Run index.html, click on a file and wait a little while for the music to come on.

So you’re ready to dive in, you would probably start looking at the source to see what’s going on.

The main block of code is this.
function play(file) {
loadRemote(file, function(data) { // step 1
midiFile = MidiFile(data); // step 2
synth = Synth(44100); // step 3
replayer = Replayer(midiFile, synth); // step 4
audio = AudioPlayer(replayer); // step 5
})
}

1. Ajax midi file loading
loadRemote() makes an ajax call to fetch the midi file and converts it into a binary string using a not so HTML5 method.

2. Midi file interpretation
This function MidiFile(data) found from [midifile.js] parses the binary string data and returns a midi javascript object representation, kind of like JSON if you think so. It uses stream.js to do sequential binary reading. If you wish to peek under a hood of a midi file, do some musical analysis, or visualizations, this is probably sufficient enough for your needs.

3. Synth object
The synth object would be responsible for the generation the waveforms audio buffers. In [synth.js] there has 3 components, signal generators, midi programs and the synth.

The signal generators or oscillators generate some basic sounds like sine waves for SineGenerator and square waves for SquareGenerator. ADSRGenerator is an Attack-Decay-Sustain-Release envelope, which shapes the amplitude/volume of a sound wave.

MidiPrograms are kinds of “presets” that mixes the note frequency these signal generators, for example, a sine wave with a envelope of a quick decay to make it sound like a percussion.

These are probably fairly basic and simple, unlike what real synthesizers may do, but surprisingly, these kind of work pretty well.

4. Player
Now if we use generated sound waves, we could send them to the audio device to have them played. But we’ll delay them to the next step, since we want to bridge the midi content we have in step 2 with the synths we have in step 3.

The [replayer] interprets the midi tracks and events, including the tempo, and with the note events, uses the midi programs from [synth.js] to generate the required audio buffers.

5. Audio device
[audio.js] would be responsible for pushing audio buffers to the respective browsers audio API. Jasmid probably used Mozilla’s Audio Data API at first, but falls back to a flash applet in non-firefox browsers. I found that the flash fallback performance wasn’t really good in chrome, (since you are trying to push 44K samples from JS to AS a second) so I added a WebKit Audio API support.

I hope I gave a sufficient walkthrough of the Jasmid library.

As you may tell, it probably not full replacement for your midi player, like my favorite midi play on windows vanbasco, but its gives the possibility to build something like that on top of that. The color piano that Michael has an example of that after adding enhancements.

At the least, you could have parsing midis in javascript, michael has this nice visualization of rachmaninov transcription of flight of the bumble bee and I’ve also a couple generated with HTML5 canvas.

It’s also very possible and tempting to build a html5 version of the music animation machine software.

If you doing more serious audio synthesis work, you might use utilize more mature libraries such as audiolib.js, audiolet.js, even jsfx (if you are doing sound effects). Perhaps the reason why I played with Jasmid was that I didn’t really know about audio synthesis, but its simplicity allow me to be aware of what’s happening and give me an idea of how audio synthesis and a midi system runs. Of course, the topic of audio, like 3D, is a huge and deep that would take up much time to learn and explore. There are even many different approaches to audio synthesizing, for example doing signals synthesizing, frequency modulation, wavetables and even physical modeling. Just getting audio to be played in the browser, would probably be sufficient to write another post “the current state of audio in browsers”.

But well, at least, the current browsers are making it fun and easy (kind of) of making things move and sound everywhere. Perhaps this year I might get time to explore this area (there already a few apps i wish to make), but even I don’t get the chance to attempt these myself, we would hopefully get to see really interesting audio/music applications and games out there soon!