MIDI (Experimental) — iHearYouCanCode

What is MIDI?

MIDI (Musical Instrument Digital Interface) is a protocol for sending musical control data between devices — not audio itself, but instructions like "play middle C", "release that note", or "turn this knob to 75." Your keyboard, drum pad, or fader box sends these tiny messages; your code decides what they mean musically.

The browser exposes MIDI through the low-level Web MIDI API. This tutorial uses WEBMIDI.js v3, which wraps that API with friendly methods like addListener(), playNote(), and sendControlChange() so you can focus on making sound instead of decoding binary messages.

1. Add these lines to your page

Everything runs in your web browser — nothing to install. Copy these lines into your HTML file. Load them in this order: p5.js, p5.sound, ProControls, then WEBMIDI.js.

<!-- Google icon font (optional — used by ProControls) -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=block" rel="stylesheet">

<!-- p5.js -->
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.13/lib/p5.min.js"></script>

<!-- p5.sound (requires p5.js above) -->
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.13/lib/addons/p5.sound.min.js"></script>

<!-- ProControls -->
<script src="https://cdn.jsdelivr.net/gh/dstein-art/proControls4p5js@v0.8.3/ProControls.js"></script>

<!-- WEBMIDI.js v3 (IIFE build) -->
<script src="https://cdn.jsdelivr.net/npm/webmidi@3.1.14/dist/iife/webmidi.iife.min.js"></script>

<!-- Your sketch -->
<script src="sketch.js"></script>

Secure origins only: Web MIDI only works on https://, localhost, or file:// pages. Use Chrome, Edge, or Opera, plug in a MIDI controller (or virtual MIDI port), and allow access when the browser prompts you.

2. Enable MIDI and list your devices

Call WebMidi.enable() after a user click — the same gesture that unlocks audio with userStartAudio(). In v3, enable() returns a promise. Once enabled, WebMidi.inputs lists every connected input port (your keyboard, pad controller, etc.).

Click the preview to enable MIDI. Device names are printed to the openConsolePanel() — a ProControls panel that captures console.log() output.

Connect a MIDI controller, then click the preview

function setup() {
  createCanvas(300, 300);
  openConsolePanel();
}

function mousePressed() {
  userStartAudio();
  WebMidi.enable().then(function() {
    console.log('Inputs: ' + WebMidi.inputs.length);
    for (var i = 0; i < WebMidi.inputs.length; i++) {
      console.log('  ' + i + ': ' + WebMidi.inputs[i].name);
    }
    console.log('Outputs: ' + WebMidi.outputs.length);
    for (var i = 0; i < WebMidi.outputs.length; i++) {
      console.log('  ' + i + ': ' + WebMidi.outputs[i].name);
    }
  });
}

function draw() {
  proControlBackground();
  fill(200); textAlign(CENTER, CENTER);
  text('click to list devices', width / 2, height / 2);
}

Pick a specific input

If you have multiple MIDI devices, grab one by name or index instead of listening on all of them:

var input = WebMidi.getInputByName("IAC Driver Bus 1");
// or
var input = WebMidi.inputs[0];

3. Trigger a synth with note on and note off

noteon starts a note; noteoff stops it. Use midiToFreq() to turn the MIDI note number into a pitch.

Click preview, then play notes

var osc;

function setup() {
  createCanvas(300, 300);
  new IconButton({icon:'power_settings_new', mode:"state", onChange: powerPressed}, width / 2, height / 2);
  osc = new p5.Oscillator('sine');
  osc.amp(0);
  osc.start();
}

function powerPressed() {
  userStartAudio();
  WebMidi.enable().then(function() {
    var input = WebMidi.getInputByName('IAC Driver Bus 1');
    input.addListener('noteon', function(e) {
      osc.freq(midiToFreq(e.note.number));
      osc.amp(0.5, 0.01);
    });
    input.addListener('noteoff', function() {
      osc.amp(0, 0.1);
    });
  });
}

function draw() {
  background(30);
}

4. Use velocity for dynamics

Velocity is how hard you press (0–127). In your noteon listener, map it to volume:

osc.amp(e.rawVelocity / 127, 0.01);

5. Map knobs with Control Change (CC)

Knobs and faders send controlchange messages. CC 1 is usually the mod wheel. Use e.rawValue (0–127) to drive a parameter.

Move a knob or mod wheel on your controller

var osc, filter;

function setup() {
  createCanvas(300, 300);
  filter = new p5.LowPass();
  osc = new p5.Oscillator('sawtooth');
  osc.disconnect();
  osc.connect(filter);
  osc.amp(0.3);
  osc.freq(110);
  osc.start();
}

function mousePressed() {
  userStartAudio();
  WebMidi.enable().then(function() {
    WebMidi.inputs[0].addListener('controlchange', function(e) {
      filter.freq(map(e.rawValue, 0, 127, 200, 5000));
    });
  });
}

function draw() {
  background(30);
}

Common CC numbers

1 — Mod wheel
7 — Volume
74 — Filter cutoff (on many controllers)

To listen for one CC only, check e.controller.number inside the listener.

6. Listen on a specific channel

Keys usually send on channel 1; drum pads often send on channel 10. Use input.channels[10] to listen only on that channel.

Hit drum pads on your controller

var kick;

function preload() {
  kick = loadSound('/assets/superdirt/000_BD.wav');
}

function setup() {
  createCanvas(300, 300);
}

function mousePressed() {
  userStartAudio();
  WebMidi.enable().then(function() {
    WebMidi.inputs[0].channels[10].addListener('noteon', function() {
      kick.play();
    });
  });
}

function draw() {
  background(30);
}

7. Combine keys, pads, and knobs

Add the { channels: [1] } option to a listener to target one channel. Keys on channel 1 play a synth; pads on channel 10 trigger a sample.

var input = WebMidi.inputs[0];

input.addListener('noteon', function(e) {
  osc.freq(midiToFreq(e.note.number));
  osc.amp(0.5);
}, { channels: [1] });

input.addListener('noteon', function() {
  clap.play();
}, { channels: [10] });

input.addListener('controlchange', function(e) {
  filter.freq(map(e.rawValue, 0, 127, 300, 6000));
});

Tip: For a full-screen test with your controller, copy any example into the p5.js Editor and add the WEBMIDI.js script tag from section 1.

Going further

WEBMIDI.js can also send MIDI — useful if you want your sketch to drive external hardware. Check out WebMidi.outputs, output.playNote(), and output.sendControlChange() in the WEBMIDI.js basics guide. Combine MIDI input with the Effects and Samples tutorials to build a full performance instrument.

MIDI Controllers