webmidi.ts

type MIDIInputMap = Map<DOMString, MIDIInput>; // maplike
type MIDIOutputMap = Map<DOMString, MIDIOutput>; // maplike
type DOMString = string;

interface MIDIAccess extends EventTarget {
  readonly inputs: MIDIInputMap;
  readonly outputs: MIDIOutputMap;
  onstatechange: (e: MIDIConnectionEvent) => void;
  readonly sysexEnabled: boolean;
}
enum MIDIPortType {
  "input",
  "output"
}
enum MIDIPortDeviceState {
  "disconnected",
  "connected"
}
enum MIDIPortConnectionState {
  "open",
  "closed",
  "pending"
}
interface MIDIPort extends EventTarget {
  readonly id: DOMString;
  readonly manufacturer?: DOMString;
  readonly name?: DOMString;
  readonly type: MIDIPortType;
  readonly version?: DOMString;
  readonly state: MIDIPortDeviceState;
  readonly connection: MIDIPortConnectionState;
  onstatechange: (e: MIDIConnectionEvent) => void;
  open: Promise<MIDIPort>;
  close: Promise<MIDIPort>;
}
interface MIDIInput extends MIDIPort {
  onmidimessage: (e: MIDIMessageEvent) => void;
}
interface MIDIOutput extends MIDIPort {
  send(data: Uint8Array | number[], timestamp?: number): void;
  clear(): void;
}
interface MIDIMessageEvent extends Event {
  readonly receivedTime: number;
  readonly data: Uint8Array;
}
interface MIDIConnectionEvent extends Event {
  readonly port: MIDIPort;
}
interface MIDIMessageEventInit extends EventInit {
  receivedTime: number;
  data: Uint8Array;
}
(navigator as any).requestMIDIAccess().then((midiAccess: MIDIAccess) => {
  for (let input of midiAccess.inputs.values()) {
    console.log(input.name, input.connection, input.state);
    input.onmidimessage = function(e: MIDIMessageEvent) {
      if (e.data[0] === 254) {
        // exclude heartbeat
        return;
      }
      console.log(e.data);
      // example: noteon / note off
      // [144, 40, 114]
      // [128, 40, 0]
    };
    input.onstatechange = function(e: MIDIConnectionEvent) {
      console.log(input.name, input.connection, input.state);
    };
  }
  for (let output of midiAccess.outputs.values()) {
    console.log(output.name, output.connection, output.state);
  }
});