Fun with Web MIDI Part 2

OK, so anyway. There’s a Web MIDI API, and it’s pretty simple to use. However, it’s simpler to use when someone’s created a nice framework with which you can call particular elements of it in a quick and simple fashion.

Fortunately, some great guy called Jean-Philippe Côté  wrote this – https://github.com/cotejp/webmidi, and it really helped speed up the work of putting together my little idea.

WebMIDI itself is something that requires an opt in, so in the same way that you’d be prompted to be opted in to push notifications, the same happens here.

So:

WebMidi.enable(onSuccess, onFailure);

Once that’s done, you can get on with using the API itself. I don’t really want to repeat too much of what can be read on the github site, so here’s a link: https://github.com/cotejp/webmidi#more-code-examples

But in essence, you can start, and stop notes (so, you could, for instance, make a sequencer for your hardware), list out MIDI ins and outs, have listeners attached to all of the above events (I dunno, want to make a light show based on your keyboard?) and, what I mainly used it for, sending CC values.

This is done with code similar to this:

WebMidi.sendControlChange(a, b, c, d);

Where

a is the CC param number
b is the value you want to send
c is the MIDI output (according to the object returned of available MIDI outs) and d is the channel on the midi output you want it sent to (useful to know, for instance, when you’ve got a synth such as the Novation circuit that has two synths on different channels or to a drum module where it’s usually 10)

Almost forgot that I’d neglected to point to the actual thing I wrote (on the off chance that you have a Minilogue to hand)

Here: http://www.duncanmetcalfe.net/minilogue/

About it, then. Going to the site will show not much at all, aside from some introductory text explaining what it is. This is basically because, instead like most people who allow you to select your MIDI output from a dropdown, or similar, I thought i’d be ‘clever’ and let the device do the talking.

Most modern devices declare their name as part of the MIDI output object. Such is the case with the Circuit (Circuit) and Minilogue (Minilogue Sound). So using a listening on event change to this object, I could run through the list of name key value pairs and if it finds what it’s looking for, it displays the rest of the page.

Which consists of a big button that says ‘randomise’ and many knobs that reflect all of those CC params that I’m randomising. Click on the button, get the values sent up to the device, and also reflect these changes in the knobs. Change the knobs and listen to the sound change. In either case, the code that it’s running, either the once for a single param or for everything I’ve told it to change is:

WebMidi.sendControlChange(5, randomNumberGen(128,5), minilogueOutput, 1)

And that’s basically all that there is to it, but even though I’ve barely scratched the surface here, and there are definitely other similar ideas for other pieces of hardware that have way better presentation (such as the Roland Boutique range, for instance) I just love the idea that there is such a low barrier for entry into something that would have previously required you write it in a ‘real’ language.