The statechange event of the MIDIAccess interface is fired when a new MIDI port is added or when an existing port changes state.

Use the event name in methods like addEventListener(), or set an event handler property.

addEventListener("statechange", (event) => {});

onstatechange = (event) => {};

A MIDIConnectionEvent. Inherits from Event.

MIDIConnectionEvent.port Read only

Returns a reference to a MIDIPort instance for a port that has been connected or disconnected.

The Navigator.requestMIDIAccess() method returns a promise that resolves with a MIDIAccess object. When a port changes state, information about that port is printed to the console.

navigator.requestMIDIAccess().then((access) => {
  access.onstatechange = (event) => {
    console.log(event.port.name, event.port.manufacturer, event.port.state);
  };
});