MIDIAccess.outputs — Eigenschaft · JavaScript-Referenz

Signatur

MIDIAccess.outputs

Beschreibung

Die Eigenschaft outputs eines MIDIAccess-Objekts liefert eine MIDIOutputMap. Das ist eine schreibgeschützte, Map-ähnliche Struktur. Jeder Eintrag hat eine eindeutige Port-ID (string) als Schlüssel und ein MIDIOutput-Objekt als Wert. Über diese Ports schicken Sie MIDI-Nachrichten an Synthesizer, Drumcomputer, DAWs oder virtuelle MIDI-Geräte.

Ein MIDIAccess-Objekt bekommen Sie über navigator.requestMIDIAccess(). Die Map unterstützt die üblichen Lesemethoden wie forEach(), get(), has(), keys(), values(), entries() und die Eigenschaft size. Sie lässt sich außerdem mit for...of durchlaufen. Methoden zum Ändern wie set() oder delete() gibt es nicht.

Typische Anwendungsfälle sind Geräte-Auswahllisten in Web-Synthesizern, Sequenzern oder Lichtsteuerungen. Die Map zeigt den Zustand zum Zeitpunkt des Zugriffs. Wenn Geräte angeschlossen oder getrennt werden, löst das MIDIAccess-Objekt das Ereignis statechange aus. Lesen Sie outputs dann neu aus, damit Ihre Oberfläche aktuell bleibt.

Rückgabewert

Typ

MIDIOutputMap

Beschreibung

Eine schreibgeschützte, Map-ähnliche Struktur mit Port-IDs (string) als Schlüsseln und MIDIOutput-Objekten als Werten. Sind keine Ausgabegeräte vorhanden, ist sie leer (size === 0).

Beispiele

Alle MIDI-Ausgabeports auflisten

const listOutputs = async () => {
  const access = await navigator.requestMIDIAccess();
  console.log(`Gefundene Ausgänge: ${access.outputs.size}`);
  for (const [id, output] of access.outputs) {
    console.log(`${id}: ${output.name} (${output.manufacturer}) – ${output.state}`);
  }
};

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

Gefundene Ausgänge: 1 output-1: Microsoft GS Wavetable Synth (Microsoft Corporation) – connected

Note an den ersten Ausgang senden

const playNote = async () => {
  const access = await navigator.requestMIDIAccess();
  const output = access.outputs.values().next().value;
  if (!output) {
    console.warn('Kein MIDI-Ausgang gefunden');
    return;
  }
  // Note On: Kanal 1 (0x90), Mittleres C (60), Anschlagstärke 100
  output.send([0x90, 60, 100]);
  // Note Off nach 500 ms
  output.send([0x80, 60, 0], performance.now() + 500);
  console.log(`Note gesendet an ${output.name}`);
};

playNote();

Note gesendet an Microsoft GS Wavetable Synth

Geräteauswahl bei statechange aktualisieren

const select = document.querySelector('#midi-out');

const renderOutputs = (access) => {
  select.replaceChildren();
  access.outputs.forEach((output, id) => {
    const option = new Option(output.name ?? 'Unbekanntes Gerät', id);
    select.append(option);
  });
};

const init = async () => {
  const access = await navigator.requestMIDIAccess();
  renderOutputs(access);
  access.addEventListener('statechange', (event) => {
    if (event.port.type === 'output') renderOutputs(access);
  });
  select.addEventListener('change', () => {
    const output = access.outputs.get(select.value);
    output?.send([0xB0, 123, 0]); // All Notes Off auf Kanal 1
  });
};

init();

// Wichtig · Fallstricke

Browser-Unterstützung: Chromium-Browser wie Chrome, Edge und Opera unterstützen die Web MIDI API seit Längerem, Firefox ab Version 108. Safari unterstützt sie nicht. Prüfen Sie deshalb vorher mit 'requestMIDIAccess' in navigator, ob die Schnittstelle vorhanden ist.
Sicherer Kontext und Berechtigung: requestMIDIAccess() gibt es nur über HTTPS oder auf localhost. Der Browser kann den Nutzer um Erlaubnis bitten. In Firefox kann zusätzlich ein Site-Permission-Add-on nötig sein. Lehnt der Nutzer ab, wird das Promise verworfen. Erfassen Sie diesen Fall immer mit catch.
SysEx: System-Exclusive-Nachrichten dürfen Sie nur senden, wenn Sie den Zugriff mit { sysex: true } angefordert haben. Andernfalls löst send() für solche Nachrichten einen InvalidAccessError aus. SysEx erfordert eine ausdrückliche Zustimmung des Nutzers, weil damit z. B. die Firmware eines Geräts verändert werden kann.
Keine echte Map: MIDIOutputMap ist keine Instanz von Map und hat keine Methoden wie set() oder delete(). Ein Array erhalten Sie mit Array.from(access.outputs.values()).
Port-IDs: Wie die IDs aussehen, bestimmt der Browser. Sie können sich zwischen Sitzungen oder nach einem erneuten Anschließen ändern. Wenn Sie eine Geräteauswahl dauerhaft speichern wollen, sichern Sie zusätzlich name und manufacturer.
Ein Port mit state === 'disconnected' kann noch eine Weile in der Map stehen. Prüfen Sie vor dem Senden den Status.

Siehe auch

MIDIAccess MIDIAccess.inputs MIDIOutput MIDIOutput.prototype.send() MIDIOutputMap Navigator.prototype.requestMIDIAccess()