Posted by & filed under Blog, Making Music in the Browser, MIDI, Tutorials, Web Audio.

MIDI has officially hit the web browser! Well, at least in Google Chrome. With the latest version of Google Chrome, MIDI is enabled by default, whereas previously it needed to be enabled by setting a special flag in your browser. This opens up a huge variety of possibilities for not only art and music in the browser, but also allows any hardware that uses MIDI as its communication platform to control and be controlled by your browser. MIDI.org itself says “the Web-MIDI API is the most significant advancement of MIDI since… MIDI itself!”

MIDI has been available on every major OS for many many years, even on iOS/tablet/mobile, but up until now there has been a glaring lack of MIDI support in something that everyone with a computer, tablet, or smartphone has: the web browser.

Uses and Advantages**

Here’s why the Web-MIDI API for Web browsers is the most significant advancement of MIDI since… MIDI itself!

  • Works on all platforms and devices. Anything with a web browser can run a Web-MIDI app and use local MIDI hardware.
  • Works with your existing MIDI setup. If your MIDI gear is connected to your computer, tablet or phone (by a cable or even wirelessly) that same connection will connect your MIDI gear to your Web-MIDI enabled browser.
  • Updates are automatic. No need to install new versions, the latest version is always available at the website URL.
  • Accessible anywhere. Apps and data in “the Cloud” are available anywhere you have an internet connection.
  • It’s the Internet! Browsers make it easy to connect you and your music to other people via social media and on-line MIDI communities.

In this introductory article to my Making Music in the Web Browser series, I’m going to take you through the basics of setting up your MIDI keyboard / controller to interface with your browser. In upcoming articles I will show you how to use the Web Audio API to build simple playback and manipulation applications all the way to building a variety of synthesizers in your browser.

Note: Basic understanding of JavaScript, or another C-based language, will help make this article a lot more digestible.
You can use Codecademy to get up to speed with JavaScript pretty quickly if you’re interested, and you can and should consult the Mozilla Developer Network often to get a more thorough understanding of the language.
Tools: Developer Console ((Mac) Command + Opt + J, (Windows) Control + Shift + J), Code Editor, such as SublimeText.

First, let’s get what the Web-MIDI API is not out of the way:*

  • Does not directly support Standard MIDI Files, although a Standard MIDI File player can be built on top of the Web MIDI API.
  • Is not intended to semantically capture patches or controller assignments, as General MIDI does, although General MIDI can easily be utilized through the Web MIDI API.

OK, plug in your MIDI keyboard and let’s get started!
Take a look at the following chunk of code which is the basic outline of using Web MIDI.

The very first step we need to take is checking if the browser supports the WebMIDI API by checking for the existence of the method requestMIDIAccess().
*Currently, only Google Chrome,Opera, Brave, and MicroSoft Edge support the Web MIDI API but in the next year or so, we may see Mozilla (FireFox) and Safari with their own implementations. Fortunately, you can use Web MIDI in all current browsers by using the greatly helpful WebMIDIAPI Polyfill written by Chris Wilson.

Ok, back to our code.

If the browser supports Web MIDI, the requestMIDIAccess() method returns a ‘MIDI Access’ object, which contains all of our connected device’s info, which we’ll be exploring soon. This ‘MIDI Access’ object gets passed to the onMIDISuccess() function for us to use. If the browser doesn’t support Web MIDI, then the onMIDIFailure() function gets called, ending all of the fun you could have had. *You may have noticed that System Exclusive messages, or ‘sysex’, are also supported if set to ‘true’, but that’s for another article.

Now that we have an active MIDI connection and our device info, we need to do something with it. Click on the ‘Result’ tab above and open up Chrome Developer Tools (Console), you will see our MIDIAccess object, which shows inputs, outputs and sysex status. MIDIAccess

What we’re after in this object is ‘inputs’, specifically their values, which we need to loop over.
Let’s add this piece of code to our onMIDISuccess() function:
inputs-loop

In the body of the for loop you will see that every time we send a message, our onMIDIMessage() function gets called.

Next, let’s add add some code to our onMIDIMessage() function to log our incoming key data:

midi-data
Press a key on your MIDI keyboard and you will see a series of messages.
MIDIMessage
Clicking on the triangle will show you all of the info you get on every key-press.

As cool as that is, it’s still not very usable. What we want to get at is the ‘data’ property.

Now we need to build out our onMIDIMessage() function so that we can use the incoming data.
Let’s add some variables to more easily use our data:

midi-data

Also, we should add a switch statement to control what happens when we press and release a key:

switch-statement

The switch statement is where the real logic happens. There are a variety of ‘cases’ that can happen on key/controller press. For instance, you can write functions that use pressure or pitch bend to manipulate the note/sample.*****

You can also easily convert MIDI note data to pitch using the Web Audio API and a function like this:

freqfrommidi

Our switch statement uses the first part of our MIDI data : [144, 63, 73], 144 to choose what we’ll do next. 144 is typically a note-on message, whereas 128 is a note-off message.

This first byte typically represents the type of MIDI Message, like on, off, pitch-bend, etc… We will also check for velocity just to make sure we are getting a noteOff message when we expect one.

Now, when you press a key you will see that you have noteOn and NoteOff messages, all you need to do is pass that key data into a function to do something with it.

Let’s add noteOn() and noteOff() functions, which calls a player() which plays samples:

noteOn_noteOff

In future posts, i’ll cover how to use the the Web Audio API to generate and use sounds in detail, but just to give you a taste of using Web Audio with Web MIDI, i’ve created a simple sample player that responds to MIDI, qwerty keyboard [q,w,e,r,t], and mouse click below. Basically, I’m loading in sounds and controlling playback using MIDI note value and velocity. I’m also randomizing sample playback speed on each keypress for variety’s sake. All of the sound i’m using are from Matt Hettich’s Eurorack post ALM Dinky’s Taiko module: Matt’s Monthly Eurorack Dig: ALM Dinky’s Taiko.
Try and dissect what the code does from my comments, i’ll explain it all in future posts on the Web Audio API. Also, the samples here are only triggered by MIDI notes 60 – 64.

Looking forward to getting our hands dirty with Web Audio and Web MIDI!

Some final words of inspiration from MIDI.org:

The Web MIDI API connects your MIDI gear directly to your browser.
Your browser connects you to the rest of the world.

Click on the ‘Result’ tab to see it in action.

You can download the source code for the lesson, with sounds here.


Here are live stats on Web MIDI browser support

Can I Use midi? Data on support for the midi feature across the major browsers from caniuse.com.


Resources:
*https://webaudio.github.io/web-midi-api/
**https://www.midi.org/aboutmidi/web-midi.php
***https://github.com/cwilso/WebMIDIAPIShim
****http://createdigitalmusic.com/2015/05/hardware-midi-chrome-audiotool-free-code-coming-html5/
*****https://www.midi.org/specifications/item/table-1-summary-of-midi-message

JavaScript Promises

JavaScript Bitwise Operators


If you have a KMI product, try this Web MIDI demo out to see the variety of data you will get from our controllers, if you don’t have a KMI product, get one at our Shop.