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.

 

 

Fun with Web MIDI Part 1

While what I do these days for a living is as far from my ‘roots’ of web development as is possible to be, I still like to dip my toe in it’s waters occasionally, simply because regardless of the bad rep it used to get in the old days, JavaScript is a fantastic language for getting shit done quickly with insta- results.

Also, Google, who are borderline obsessed with their ‘Chromebook’ project are trying to port as many functions as would be available to Real Programmers as possible, with the aim of most native features of a desktop to a browser, so that even a simple guy such as myself can play around with features that would have traditionally been out of reach.

However, one of the W3C’s latest additions – Web MIDI – is of particular interest to me. As an incredibly amateur musician, I’ve always found playing with a handful of VSTs and Ableton Live is a enjoyable way to pass the time, even though completing actual tracks is becoming a challenge, thanks to the time poor nature of having young children.

Nevertheless, my mid-life crisis has spurred me on to buy the occasional piece of hardware, and to date, I have a few Korg Volcas, a Novation Circuit and, more recently, a Korg Minilogue to cock about within the evening.

The discovery of the Web MIDI API, then, made me imagine a way of controling these via my browser in some way. In particular, the Circuit which, while it looks like a relatively simple groovebox, is in fact two instances of a pretty powerful virtual analogue synth presumably based on the ‘Nova’ range of synths, including the Ultra and MiniNovas.

Novation did enlist the help of Isotonik Studios to put together an editor, but by it’s very nature of being an incredibly deep synth, is still pretty dense. So I tried to write my version with big controls for my fat fingers.

I also figured that there would be no harm in writing some code that basically randomised every parameter available to see if I could make ‘happy accidents’ simply by touching a button.

Part two will go through how this was achieved, what tools to use, and whether it actually made any patches that sounded half decent.