🎹 Tone.js MIDI Input / Output

In this lesson, you’ll learn how to use the Web MIDI API alongside Tone.js to connect to MIDI devices, receive MIDI messages, and prepare for MIDI output.

Why MIDI + Tone.js?

MIDI devices (like keyboards, controllers) send messages to your browser. With Tone.js, you can convert these MIDI messages into beautiful synthesized sounds or trigger effects. This opens up endless possibilities for web-based music creation!

How It Works

- First, you ask the browser for MIDI access.
- Then, you listen to MIDI input devices for note or control change messages.
- You can also send MIDI messages to output devices.
- Here, we’ll focus on connecting and logging MIDI input messages.

Code Breakdown

// Request MIDI access from browser
async function requestMIDI() {
  const access = await navigator.requestMIDIAccess();
  const inputs = [...access.inputs.values()];
  inputs.forEach(input => {
    input.onmidimessage = (msg) => {
      console.log(msg.data);
    };
  });
}
  

Try It Out!

Click the button above, then play notes on your connected MIDI keyboard or controller. MIDI message data will appear below in real time.