Signatur
Beschreibung
MIDIOutputMap ist ein schreibgeschütztes, Map-ähnliches Interface der Web MIDI API. Eine Instanz bekommst du über die Eigenschaft outputs des MIDIAccess-Objekts, das navigator.requestMIDIAccess() liefert. Die Schlüssel sind die eindeutigen Port-IDs (string), die Werte sind MIDIOutput-Objekte, an die du mit send() MIDI-Nachrichten schicken kannst.
Weil das Interface „maplike“ ist, stehen dir die lesenden Methoden eines Map zur Verfügung: size, get(), has(), keys(), values(), entries(), forEach() und die Iteration mit for...of. Verändernde Methoden wie set(), delete() oder clear() gibt es nicht. Der Browser pflegt die Map selbst.
Typische Anwendungsfälle: eine Auswahlliste mit angeschlossenen Synthesizern, Controllern oder virtuellen MIDI-Ports erzeugen, einen bestimmten Port per ID wiederfinden oder Noten an alle Ausgänge gleichzeitig senden. Wenn Geräte angeschlossen oder entfernt werden, meldet MIDIAccess das über das Ereignis statechange. Danach solltest du die Map neu auslesen.
Rückgabewert
[id: string, port: MIDIOutput]; es ist über MIDIAccess.outputs erreichbar.Beispiele
Alle MIDI-Ausgänge auflisten
const listOutputs = async () => {
const access = await navigator.requestMIDIAccess();
const outputs = access.outputs; // MIDIOutputMap
console.log(`Gefundene Ausgänge: ${outputs.size}`);
for (const [id, port] of outputs) {
console.log(id, port.name, port.manufacturer, port.state);
}
};
listOutputs().catch((err) => console.error('MIDI nicht verfügbar:', err));Note an einen ausgewählten Port senden
const playNote = async (portId, note = 60) => {
const access = await navigator.requestMIDIAccess();
if (!access.outputs.has(portId)) {
throw new Error(`Port ${portId} nicht gefunden`);
}
const output = access.outputs.get(portId);
output.send([0x90, note, 0x7f]); // Note On, Kanal 1
output.send([0x80, note, 0x40], performance.now() + 500); // Note Off nach 500 ms
};
// Beispiel: ersten verfügbaren Port verwenden
const access = await navigator.requestMIDIAccess();
const [firstId] = access.outputs.keys();
if (firstId) await playNote(firstId);Auswahlliste füllen und bei Geräteänderungen aktualisieren
const select = document.querySelector('#midi-out');
const access = await navigator.requestMIDIAccess();
const render = () => {
select.replaceChildren();
access.outputs.forEach((port, id) => {
select.append(new Option(port.name ?? id, id));
});
};
render();
access.addEventListener('statechange', (e) => {
if (e.port.type === 'output') render();
});// Wichtig · Fallstricke
- Browserunterstützung: Chromium-basierte Browser (Chrome, Edge, Opera) und Firefox ab Version 108 unterstützen die API. Firefox verlangt dafür ein signiertes Add-on bzw. eine Seitenberechtigung. Safari unterstützt die Web MIDI API nicht. Prüfe deshalb vorher mit
'requestMIDIAccess' in navigator, ob sie vorhanden ist. - Die API läuft nur in einem sicheren Kontext (HTTPS oder
localhost). Außerdem muss der Nutzer den Zugriff erlauben. Mit{ sysex: true }ist eine zusätzliche Berechtigung nötig. - Die Map ist schreibgeschützt:
set(),delete()undclear()gibt es nicht. - Port-IDs sind nicht garantiert dauerhaft stabil, wenn Geräte neu angeschlossen werden oder auf anderen Rechnern laufen. Speicherst du eine Auswahl, solltest du zur Sicherheit auch
nameundmanufacturerabgleichen. - Ein Eintrag mit
state === 'disconnected'kann kurzzeitig noch in der Map stehen. Prüfe daher vor dem Sendenport.state.