Web MIDI API

MIDIInputMap

Repräsentiert alle verfügbaren MIDI-Eingangsports.

MIDIOutputMap

Repräsentiert alle verfügbaren MIDI-Ausgangsports.

MIDIAccess

Bietet die Methoden, um Ein- und Ausgabegeräte aufzulisten und auf ein einzelnes Gerät zuzugreifen.

MIDIPort

Repräsentiert einen einzelnen MIDI-Port.

MIDIInput

Bietet eine Methode für den Umgang mit MIDI-Nachrichten von einem Eingangsport.

MIDIOutput

Lüft Nachrichten in die verbundene MIDI-Schnittstelle. Nachrichten können sofort oder nach einer festgelegten Verzögerung gesendet werden.

MIDIMessageEvent

Das Event, das an das MIDIInput midimessage Event übergeben wird.

MIDIConnectionEvent

Das Event, das bei MIDIAccess statechange und MIDIPort statechange Events übergeben wird, wenn ein Port verfügbar oder nicht verfügbar wird.

Der Zugriff auf die API wird über die Methode navigator.requestMIDIAccess() angefordert.

• Die Methode muss in einem sicheren Kontext aufgerufen werden.
• Der Zugriff kann durch die midi HTTP Berechtigungsrichtlinie gesteuert werden.
• Der Benutzer muss die Berechtigung zur Nutzung der API über einen benutzerspezifischen Mechanismus explizit gewähren oder zuvor bereits gewährt haben. Beachten Sie, dass wenn der Zugriff durch eine Berechtigungsrichtlinie verweigert wird, er nicht durch eine Benutzererlaubnis gewährt werden kann.

Der Berechtigungsstatus kann mit der Permissions API Methode navigator.permissions.query() abgefragt werden, wobei ein Berechtigungsdeskriptor mit der midi-Berechtigung und (optional) der sysex-Eigenschaft übergeben wird:

navigator.permissions.query({ name: "midi", sysex: true }).then((result) => {
  if (result.state === "granted") {
    // Access granted.
  } else if (result.state === "prompt") {
    // Using API will prompt for permission
  }
  // Permission was denied by user prompt or permission policy
});

Die Methode navigator.requestMIDIAccess() gibt ein Promise zurück, das auf ein MIDIAccess Objekt aufgelöst wird, das dann verwendet werden kann, um auf ein MIDI-Gerät zuzugreifen. Die Methode muss in einem sicheren Kontext aufgerufen werden.

let midi = null; // global MIDIAccess object
function onMIDISuccess(midiAccess) {
  console.log("MIDI ready!");
  midi = midiAccess; // store in the global (in real usage, would probably keep in an object instance)
}

function onMIDIFailure(msg) {
  console.error(`Failed to get MIDI access - ${msg}`);
}

navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);

In diesem Beispiel werden die Liste der Ein- und Ausgangsports abgerufen und in der Konsole ausgegeben.

function listInputsAndOutputs(midiAccess) {
  for (const entry of midiAccess.inputs) {
    const input = entry[1];
    console.log(
      `Input port [type:'${input.type}']` +
        ` id:'${input.id}'` +
        ` manufacturer:'${input.manufacturer}'` +
        ` name:'${input.name}'` +
        ` version:'${input.version}'`,
    );
  }

  for (const entry of midiAccess.outputs) {
    const output = entry[1];
    console.log(
      `Output port [type:'${output.type}'] id:'${output.id}' manufacturer:'${output.manufacturer}' name:'${output.name}' version:'${output.version}'`,
    );
  }
}

Dieses Beispiel gibt alle MIDI-Eingangsnachrichten in der Konsole aus.

function onMIDIMessage(event) {
  let str = `MIDI message received at timestamp ${event.timeStamp}[${event.data.length} bytes]: `;
  for (const character of event.data) {
    str += `0x${character.toString(16)} `;
  }
  console.log(str);
}

function startLoggingMIDIInput(midiAccess) {
  midiAccess.inputs.forEach((entry) => {
    entry.onmidimessage = onMIDIMessage;
  });
}

• Einführung in Web MIDI
• Musik machen im Browser