Let’s start the new year venting a few left over holiday frustrations. Agony Aunt Ruth is here and on hand to answer all your dev questions. Today’s subject: MIDI.
Dear Ruth,
Something’s been bothering me with my web development recently. There seems to be a lot of new browser APIs that don’t appear to have a lot to do with building websites! Take the MIDI API for example… why is this W3C working draft available in Chrome & Opera? It seems so far removed from websites!
Sincerely, K
Hi K,
Thanks for your letter! Yes, I can absolutely empathise with your sentiment. There’s a lot of new functionality that’s getting a buzz in the web development world today, and MIDI seems to be removed from what one would consider typically web… so why then?
Well, with the Web Audio API gaining such traction and popularity over the past few years, it seems like a great extension to the hardware side of any web based software you may want to build with it. But MIDI is so much more than that. A standardised data protocol by itself, with a wealth of affordable MIDI devices available, it seems primed for web based hardware projects and dare I buzzword it up with internet of things! Read on to find out more about MIDI, and you may be a little more convinced about where it could sit in your web dev life :)
Dear Ruth,
I was wondering if you could help, my partner and I had a falling out recently. I understand that MIDI is a data format, whereas he swears blind it’s audio and musical instruments. Can you enlighten us please and put an end to the throwing of mince pies?
Thanks, B.
Hi B,
You’re right! MIDI is a data format. But I understand how your partner could be confused. It was originally standardised in 1983 by a panel of music industry experts, due to the rise in popularity of electronic instruments (such as synthesisers). Compatibility of said instruments was an issue and so MIDI (or Musical Instrument Digital Interface) was born.
As far as said music and instruments is concerned, a simple MIDI data packet, (let’s say when a note is played), sends you information regarding the instrument, note and velocity (if available), but it can also give you over-riding information about track timings, spatial panning, musical effects like vibrato and master volume. It doesn’t itself contain any audio, that comes from the instrument itself.
MIDI will always be associated with music. However the data protocol has surpassed just digital audio, there’s extensions such as a MIDI Show Control and a MIDI Machine Control! You can read more on the MIDI Manufacturers Association’s Website.
I would also suggest throwing sprouts, no one misses a sprout.
Dear Ruth,
I feel hard done by with my Xmas pressies, it was socks and lip balm all over again :( So I thought I’d treat myself to a bit of hardware this New Year and I was thinking of a MIDI device, but I have no idea where to start looking for one. I did a search the other day and was presented with an incredible array of different instruments, weird synthesisers and other things called controllers! It was all very confusing, I don’t even know where to start!
Please help, D.
Hi D,
Yes it’s all a little overwhelming isn’t it :) Don’t panic. Go and pour yourself a mug of mulled cider, light the fire and pull out the laptop – we’ll find you something! The first question to ask is what do you want to use your MIDI device for? Do you play an instrument? If so there’s actually a lot of instruments that are MIDI enabled now. Obvious ones such as keyboards or drum kits, but did you know there’s also MIDI enabled wind instruments!
As a rule synthesisers and drum machines come with built in audio (and can be quite costly). If you are using the Web MIDI API in conjunction with the Web Audio API for sound, or you don’t want to use sound at all, I would recommend looking at MIDI controllers.
There are some nice ones on the Keith McMillan site and Korg are a well known producer (the KORG NanoPad2 is very affordable). The Novation Launchpad is pretty popular with developers and I super like my first buy which was an AKAI LPD8. There is a huge range, so set yourself a budget, figure out whether you want pads, dials, sliders or all of the above and go from there. Most new MIDI devices are USB these days, but just check to make sure.
Also for future years, there’s a website called Amazon that sell all the things. You can put together a wish list on it and send it to the relatives. I’d advise that, otherwise you might get lost in a sock and lip balm cave and we certainly wouldn’t want that.
Dear Ruth,
I’m suffering for a mild case of winter creative block. I want to add some hardware into one of my web projects, but am not really sure where to start. Do you have any suggestions? I’d really like to stick with JavaScript as this is what I am most familiar with.
Cheers, J
Hi J,
How about adding some MIDI control! With the Web MIDI API we can stick with JavaScript and it’s pretty simple to manipulate the received data to control whatever purpose you like. Plus there’s already plenty of compatible hardware on the market.
A simple code example to log values your MIDI controller gives you looks something like this:
var midi, data;
// start talking to MIDI controller
if (navigator.requestMIDIAccess) {
navigator.requestMIDIAccess({
sysex: false
}).then(onMIDISuccess, onMIDIFailure);
} else {
console.warn(“No MIDI support in your browser”)
}
// on success
function onMIDISuccess(midiData) {
// this is all our MIDI data
midi = midiData;
var allInputs = midi.inputs.values();
// loop over all available inputs and listen for any MIDI input
for (var input = allInputs.next(); input && !input.done; input = allInputs.next()) {
// when a MIDI value is received call the onMIDIMessage function
input.value.onmidimessage = gotMIDImessage;
}
}
function gotMIDImessage(messageData) {
console.log(messageData.data);
}
Here we’re simply logging the values a MIDI controller sends when keys are played, pads are pressed and dials are turned. If you have a MIDI controller to hand plug it in and give it a go with this working example I put together for you.
Because we are just working with numeric values, you can easily manipulate that data to control anything you can think of. Go classic with sound and hook it into the Web Audio API. There’s a great set of web audio and MIDI demos here to inspire you. There is also a polyfill for the API, created by Chris Wilson, as long as the user has Jazz-Soft.net’s Jazz-Plugin installed.
Don’t be afraid to think outside the box however, why not browse web pages with a MIDI controller, hook it up with the Web Bluetooth API in Chrome and control any bluetooth device. I’ve personally been using it to control audio/visual projections. It may seem a little far- fetched right about now, but it is being used in the wild. We Make Awesome Sh recently created Madeon’s Adventure Machine, which was fully compatible with the Novation Launchpad, allowing users to plug one in and use it directly with the site should they own one.
Of course this is all fine and dandy if you have a piece of hardware to hand, but what if you don’t? I’ve put a little holiday present together for you all, it’s a (very) trimmed down version of my AKAI LPD8 emulated within a browser. It’s just a little demo, but it gives you a good idea of what to expect when you’re working with real hardware.
See the Pen Emulated MIDI Controller by Rumyra (@Rumyra) on CodePen.
So Happy New Year everyone! And I hope that inspires you to all try a little hardware with your web this year. If you want to dig further into MIDI please don’t hesitate to get in touch. And, as always, if you have any further web grievances feel free to tweet me, Agony Aunt Ruth is always on hand to help.