So what does the Web MIDI API tell you about the device you’re playing and what that device is currently doing? Let’s have a look.
To follow along, have a look at my fork of the Toptal Web MIDI API demo. All I’ve done is add a console log to the
_onmidimessage() function in
/js/synth.js. Console logging the event being passed to
_onmidimessage() provides a wealth of information about your MIDI controller. The event and the data it holds are what you will use to start piping MIDI messages into other parts of your app.
MIDI Message Events
Here’s a screenshot of the app and my console after hitting a MIDI pad 4 times:If you’ve worked with MIDI before, you can probably guess that the 8 console logs visible in that screenshot correspond to attack and release events, two events for each physical action of tapping a pad.
This is basic info about the MIDI controller you are using. I assume that access to this information will come in handy when making an app that supports factory settings for specific devices.
.srcElement provides data on the device that you have currently connected:
Signal type, note, and velocity
`.data` is an array with three elements:
.data is where you will find most of the information you are truly after: was the note triggered or released? what note was played? how hard was the key pressed?
0: 144 // signal type; in this case, attack 1: 48 // the note played; in this case, C3 2: 47 // velocity
So if you want access to the note played, you would just write
A quick note about the first element in the array: 144 is designated as “attack”, 128 is “release”. Knowing which is which will be useful for various situations, including for knowing when to update the UI for key press and release.
For notes, pitch bend/detune data is also apparently signaled via the first and third elements in the array. So, for example, if you have an XY pad on your MIDI controller, you can still get the data signaled via the
I haven’t played with pitch bend much yet, but if you look at the console logs you should be able to find what you want to know easily. As you might expect, pitch bending generates a lot of MIDI events, so expect your console to fill up quickly!