MIDIConnectionEvent.port — Eigenschaft · JavaScript-Referenz

Signatur

MIDIConnectionEvent.port

Beschreibung

Die Eigenschaft MIDIConnectionEvent.port ist schreibgeschützt und verweist auf den MIDIPort, der das statechange-Ereignis ausgelöst hat. Das Ereignis wird sowohl auf dem MIDIAccess-Objekt als auch auf dem betroffenen Port selbst ausgelöst, z. B. wenn ein USB-MIDI-Keyboard eingesteckt oder abgezogen wird oder wenn ein Port geöffnet bzw. geschlossen wird.

Der zurückgegebene Port ist entweder ein MIDIInput oder ein MIDIOutput. Über seine Eigenschaften type ("input"/"output"), state ("connected"/"disconnected"), connection ("open"/"closed"/"pending") sowie id, name und manufacturer kannst du feststellen, was genau passiert ist.

Typischer Einsatz: Geräteliste in der Oberfläche live aktualisieren, beim Anschließen eines Controllers automatisch einen onmidimessage-Handler registrieren und beim Trennen aufräumen oder den Nutzer informieren.

Rückgabewert

Typ

MIDIPort (MIDIInput | MIDIOutput)

Beschreibung

Der Port, dessen Verbindungs- oder Öffnungszustand sich geändert hat. Bei selbst konstruierten Ereignissen ohne port-Option ist der Wert null.

Beispiele

Anschließen und Trennen von Geräten protokollieren

const access = await navigator.requestMIDIAccess();

access.addEventListener('statechange', (event) => {
  const { port } = event;
  console.log(`${port.type} "${port.name}" (${port.manufacturer}): ${port.state} / ${port.connection}`);
});

input "Launchkey Mini" (Novation): connected / closed input "Launchkey Mini" (Novation): disconnected / closed

Neu verbundene Eingänge automatisch abhören

const handleMessage = (msg) => {
  const [status, note, velocity] = msg.data;
  console.log('MIDI:', status.toString(16), note, velocity);
};

const access = await navigator.requestMIDIAccess();

// Bereits vorhandene Eingänge anbinden
access.inputs.forEach((input) => { input.onmidimessage = handleMessage; });

access.onstatechange = ({ port }) => {
  if (port.type !== 'input') return;
  if (port.state === 'connected') {
    port.onmidimessage = handleMessage; // öffnet den Port implizit
  } else {
    port.onmidimessage = null;
    console.warn(`Gerät getrennt: ${port.name}`);
  }
};

MIDI: 90 60 100 Gerät getrennt: Launchkey Mini

Geräteliste in der Oberfläche aktualisieren

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

const render = () => {
  list.replaceChildren(
    ...[...access.inputs.values(), ...access.outputs.values()].map((p) => {
      const li = document.createElement('li');
      li.textContent = `${p.type === 'input' ? '⬅' : '➡'} ${p.name} (${p.state})`;
      return li;
    })
  );
};

access.addEventListener('statechange', (event) => {
  console.log('Geändert:', event.port.id);
  render();
});
render();

Geändert: input-0

// Wichtig · Fallstricke

Mehrfache Ereignisse: Ein Gerät kann mehrere statechange-Ereignisse auslösen – eines für den Anschluss (state) und weitere beim Öffnen/Schließen (connection). Prüfe daher immer port.state und port.connection, statt jedes Ereignis als „neues Gerät“ zu werten.
Ein- und Ausgänge: Ein physisches Gerät erscheint meist als separater MIDIInput und MIDIOutput mit eigener id; es feuern also zwei Ereignisse.
Implizites Öffnen: Das Setzen von onmidimessage öffnet einen Eingang und löst selbst ein weiteres statechange aus – Endlosschleifen vermeiden.
Kompatibilität & Sicherheit: Die Web MIDI API erfordert einen sicheren Kontext (HTTPS) und Nutzerzustimmung; Safari unterstützt sie nicht. In Firefox ist zusätzlich eine Berechtigung per Site-Permission-Add-on nötig. Vor Nutzung mit 'requestMIDIAccess' in navigator prüfen.
Die Eigenschaft ist schreibgeschützt; bei new MIDIConnectionEvent('statechange', { port }) wird sie über das Options-Objekt gesetzt.

Siehe auch

MIDIConnectionEvent MIDIPort Navigator.requestMIDIAccess() MIDIInput MIDIOutput DeviceOrientationEvent.absolute