MIDIInputMap — Schnittstelle · JavaScript-Referenz

Signatur

interface MIDIInputMap

Beschreibung

MIDIInputMap ist die Sammlung, die du über MIDIAccess.inputs bekommst. Sie enthält alle MIDI-Eingangsports, die das System gerade meldet, zum Beispiel USB-Keyboards, Pad-Controller oder virtuelle MIDI-Ports. Schlüssel ist die eindeutige Port-ID (string), Wert jeweils ein MIDIInput-Objekt.

Die Schnittstelle verhält sich wie eine schreibgeschützte Map. Du kannst size, get(), has(), keys(), values(), entries() und forEach() nutzen und sie direkt mit for...of durchlaufen. Methoden zum Ändern wie set(), delete() oder clear() gibt es nicht.

Typischer Einsatz: Beim Start deiner Musik-App liest du alle Eingänge aus, zeigst sie in einer Geräteauswahl an und hängst an den gewählten Eingang einen midimessage-Listener. Werden Geräte an- oder abgesteckt, meldet MIDIAccess das über das Ereignis statechange. Danach solltest du die Map neu auslesen.

Rückgabewert

Typ

MIDIInputMap

Beschreibung

Wird von MIDIAccess.inputs geliefert. Das ist eine Map-ähnliche Sammlung mit Einträgen vom Typ [id: string, input: MIDIInput].

Beispiele

Alle MIDI-Eingänge auflisten

const listInputs = async () => {
  const access = await navigator.requestMIDIAccess();
  const inputs = access.inputs; // MIDIInputMap

  console.log(`Gefundene Eingänge: ${inputs.size}`);
  for (const [id, input] of inputs) {
    console.log(`${id}: ${input.manufacturer} – ${input.name} (${input.state})`);
  }
};

listInputs().catch((err) => console.error('MIDI nicht verfügbar:', err));

Gefundene Eingänge: 1 input-0: Arturia – KeyStep 37 (connected)

Auf Noten aller Eingänge hören

const access = await navigator.requestMIDIAccess();

const onMessage = (event) => {
  const [status, note, velocity] = event.data;
  const command = status & 0xf0;
  if (command === 0x90 && velocity > 0) {
    console.log(`Note an: ${note}, Anschlagstärke ${velocity} (${event.target.name})`);
  }
};

access.inputs.forEach((input) => {
  input.onmidimessage = onMessage;
});

Note an: 60, Anschlagstärke 97 (KeyStep 37)

Geräteauswahl bei An- und Abstecken aktualisieren

const access = await navigator.requestMIDIAccess();
const select = document.querySelector('#midi-input');

const renderOptions = () => {
  select.replaceChildren(
    ...Array.from(access.inputs.values(), (input) => new Option(input.name, input.id))
  );
};

renderOptions();
access.addEventListener('statechange', (e) => {
  if (e.port.type === 'input') renderOptions();
});

select.addEventListener('change', () => {
  const input = access.inputs.get(select.value);
  if (input) input.onmidimessage = (ev) => console.log(ev.data);
});

// Wichtig · Fallstricke

Browser-Unterstützung: Chrome, Edge, Opera und Firefox (ab 108) unterstützen die Web MIDI API. Safari unterstützt sie nicht. Prüfe vorher mit 'requestMIDIAccess' in navigator, ob die API vorhanden ist.
Nur sicherer Kontext: Die API funktioniert nur über HTTPS oder localhost. Außerdem muss der Nutzer den Zugriff erlauben; in Firefox ist dafür eine Website-Berechtigung nötig. SysEx-Zugriff ({ sysex: true }) muss gesondert erlaubt werden.
Die Map ist schreibgeschützt: set(), delete() und clear() gibt es nicht.
Keine feste Momentaufnahme: Der Inhalt kann sich ändern, sobald Geräte an- oder abgesteckt werden. Leg Listen daher nicht einmalig in einer Variablen ab, sondern reagiere auf statechange.
Port-IDs sind nicht zwingend über Sitzungen oder Geräte hinweg stabil. Wenn du eine Geräteauswahl speicherst, merke dir zusätzlich name und manufacturer.
Wenn du onmidimessage setzt, wird der Port implizit geöffnet. Bei addEventListener('midimessage', …) ist in manchen Browsern zusätzlich input.open() nötig.

Siehe auch

MIDIAccess MIDIInput MIDIOutputMap Navigator.requestMIDIAccess() Map