/ coding

Looking inside MIDI Message Events in the Web MIDI API

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:

[![MIDI message events](https://blog.ashryan.io/content/images/2015/05/MIDI-message-events.png)](https://blog.ashryan.io/content/images/2015/05/MIDI-message-events.png)MIDI message events
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.

It’s also clear that these MIDI messages are JavaScript objects. So what’s inside?

[![Inside a MIDI message event](https://blog.ashryan.io/content/images/2015/05/Single-MIDI-message-event.png)](https://blog.ashryan.io/content/images/2015/05/Single-MIDI-message-event.png)Inside a MIDI message event
Most immediately interesting to me have been `.data` and `.srcElement`. (I’m also curious about the differences between `.receivedTime` vs `.timeStamp`, but I haven’t looked into them yet.)

Source Element

.srcElement provides data on the device that you have currently connected:

[![The MIDI message event's source element](https://blog.ashryan.io/content/images/2015/05/MIDI-message-event-source-element.png)](https://blog.ashryan.io/content/images/2015/05/MIDI-message-event-source-element.png)The MIDI message event’s source element
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.

Signal type, note, and velocity

.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?

[![MIDI message event data](https://blog.ashryan.io/content/images/2015/05/MIDI-message-event-data.png)](https://blog.ashryan.io/content/images/2015/05/MIDI-message-event-data.png)MIDI message event data
`.data` is an array with three elements:
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 e.data[1].

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.

Pitch bend/detune

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 .data array.

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!

Looking inside MIDI Message Events in the Web MIDI API
Share this