Signatur
Beschreibung
Die Eigenschaft inputs eines MIDIAccess-Objekts gibt eine MIDIInputMap zurück. Diese Map ist schreibgeschützt und funktioniert wie eine Map: Die Schlüssel sind die eindeutigen Port-IDs (string), die Werte sind MIDIInput-Objekte. Sie können darüber iterieren (for...of, forEach(), keys(), values(), entries()) und mit get() bzw. has() gezielt auf einzelne Ports zugreifen.
Sie bekommen ein MIDIAccess-Objekt über navigator.requestMIDIAccess(). Danach nutzen Sie inputs, um angeschlossene Keyboards, Controller oder Drum-Pads zu finden und über das midimessage-Event eingehende Noten, Controller-Änderungen und andere MIDI-Nachrichten zu empfangen.
Die Map zeigt den Zustand zum Zeitpunkt des Zugriffs. Werden Geräte an- oder abgesteckt, meldet der Browser das über das statechange-Event am MIDIAccess-Objekt. Lesen Sie inputs in diesem Fall neu aus, statt eine zwischengespeicherte Liste weiterzuverwenden.
Rückgabewert
string), die Werte sind MIDIInput-Objekte mit Eigenschaften wie name, manufacturer, state und connection.Beispiele
Alle MIDI-Eingänge auflisten
const listInputs = async () => {
if (!navigator.requestMIDIAccess) {
console.warn('Web MIDI API wird nicht unterstützt.');
return;
}
const access = await navigator.requestMIDIAccess();
console.log(`Gefundene Eingänge: ${access.inputs.size}`);
for (const [id, input] of access.inputs) {
console.log(`${id}: ${input.name} (${input.manufacturer}) – ${input.state}`);
}
};
listInputs();Noten von allen Eingängen empfangen
const handleMessage = (event) => {
const [status, note, velocity] = event.data;
const command = status & 0xf0;
if (command === 0x90 && velocity > 0) {
console.log(`Note an: ${note}, Anschlagstärke ${velocity}`);
} else if (command === 0x80 || (command === 0x90 && velocity === 0)) {
console.log(`Note aus: ${note}`);
}
};
const access = await navigator.requestMIDIAccess();
access.inputs.forEach((input) => {
// Setzen von onmidimessage öffnet den Port implizit
input.onmidimessage = handleMessage;
});Auf An- und Abstecken von Geräten reagieren
const access = await navigator.requestMIDIAccess();
const attach = (input) => {
input.addEventListener('midimessage', (e) => console.log(input.name, e.data));
};
access.inputs.forEach(attach);
access.addEventListener('statechange', (event) => {
const port = event.port;
if (port.type !== 'input') return;
console.log(`${port.name}: ${port.state}`);
if (port.state === 'connected' && port.connection === 'closed') {
attach(access.inputs.get(port.id));
}
});// Wichtig · Fallstricke
- Browserunterstützung: Chromium-Browser und Firefox (ab 108) unterstützen die Web MIDI API, Safari nicht. Prüfen Sie deshalb immer zuerst, ob
navigator.requestMIDIAccessexistiert. - Sicherer Kontext und Berechtigung: Die API funktioniert nur über HTTPS (oder
localhost). Der Nutzer muss den Zugriff erlauben, und die Berechtigungsrichtlinie (Permissions-Policy: midi) darf ihn nicht blockieren. Lehnt der Nutzer ab, wird das Promise verworfen. Behandeln Sie diesen Fall deshalb mittry/catch. - SysEx:
inputsliefert SysEx-Nachrichten nur, wenn der Zugriff mit{ sysex: true }angefragt wurde. Dafür fragt der Browser meist ausdrücklich nach. - Momentaufnahme: Die Map ist nicht dauerhaft gültig. Werden Geräte an- oder abgesteckt, ändert sich ihr Inhalt. Reagieren Sie deshalb auf
statechange, statt Referenzen dauerhaft zu speichern. - Keine Array-Methoden:
MIDIInputMapist kein Array. Nutzen SieArray.from(access.inputs.values()), wenn Siemap()oderfilter()brauchen. - „Note an“ mit Anschlagstärke 0: Viele Geräte senden „Note an“ mit Anschlagstärke 0 statt „Note aus“. Werten Sie beide Fälle aus.