JavaScript Web MIDI API

// Requesting access to MIDI devices
// Browsers automatically prompt the user for permission on first access
async function initMIDI() {
  try {
    const midiAccess = await navigator.requestMIDIAccess();
    console.log('MIDI access obtained', midiAccess);

    // Handle devices connecting or disconnecting dynamically
    midiAccess.onstatechange = (e) => {
      console.log('Device state changed:', e.port.name, e.port.state);
    };

    // Attach the message handler to all available MIDI inputs
    midiAccess.inputs.forEach((input) => {
      input.onmidimessage = onMIDIMessage;
    });
  } catch (err) {
    console.error('Could not access MIDI devices', err);
  }
}
initMIDI();
// This code snippet requests MIDI access, handles dynamic device changes, and attaches the input handler to all connected devices.

// Handling incoming MIDI messages
function onMIDIMessage(message) {
  // MIDI messages vary in length; standard channel messages are typically 3 bytes
  if (message.data.length < 2) return;
  const [command, note, velocity] = message.data;
  console.log(`MIDI message received: Command=${command}, Note=${note}, Velocity=${velocity}`);
}
// This function logs each MIDI message received, detailing the command, note, and velocity.

// Getting an output port and sending a note
async function sendNoteOnExample(midiAccess) {
  const outputs = midiAccess.outputs;
  if (outputs.size === 0) {
    console.log('No MIDI outputs available');
    return;
  }
  const midiOutput = Array.from(midiAccess.outputs.values())[0]; // Select the first available port

  midiOutput.send([0x90, 60, 100]); // Note on (0x90 represents channel 1)
  // Note: In production apps, track active notes to send 'note off' when the key is released,
  // rather than using setTimeout, to prevent stuck notes.
  setTimeout(() => {
    midiOutput.send([0x90, 60, 0]); // Note off (0x90 with velocity 0 ensures broader hardware compatibility)
  }, 500);
}
// This function retrieves a connected MIDI output port, sends a 'note on' message, and turns it off after 500 milliseconds.