The following are the technical notes from the MIDI workshop led by David Stein on November 14. 2022.

In this workshop we used Midi controllers not to make music, but to send data from the controller to our P5 sketch so that we can use the data within our sketch. This can allow a Midi controller to work as a game controller or as a controller to create interactive art and experiences.

Javascript Callback Functions(aka Listeners or Event Handlers)

An important concept to understand when using the WebMidi library as well as many other libraries is the concept of “Callback Functions”.

A callback function is a function that is called when an event occurs. It is sometimes called an event handler or a listener.

If callback functions did not exist, we would have to wait in a loop for things to happen. This would make code far more difficult as we would have to figure out ways to prevent bottlenecks from occurring during this waiting period.

We have already had exposure to at least one callback function in P5 which is:

function mousePressed() {
  // This function is automatically called by P5 when the mouse is pressed
	// Write your mouse handling code here
}

Note: Another example of a routine that uses callback functions is function preload() which loads files for P5 and does not run the setup() until after everything is loaded. This is managed (hidden to us) deep within the P5 functionality.

WebMidi.JS Library

WebMidi.JS is an easy to use Javascript Library for interfacing with Midi Devices in your browser.

https://webmidijs.org/

Some functions of this Library are:

To load the webmidi.js library, add the following within your html page’s <HEAD></HEAD>:

<head>
<script src="<https://cdn.jsdelivr.net/npm/webmidi@next/dist/iife/webmidi.iife.js>"></script>
</head>