Web MIDI API

Schnittstellen

MIDIInputMap

Stellt alle verfügbaren MIDI-Eingangsports dar.

MIDIOutputMap

Stellt alle verfügbaren MIDI-Ausgangsports dar.

MIDIAccess

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

MIDIPort

Stellt einen individuellen MIDI-Port dar.

MIDIInput

Bietet eine Methode zur Bearbeitung von MIDI-Nachrichten von einem Eingangsport.

MIDIOutput

Wartet Nachrichten an den verbundenen MIDI-Port ein. Nachrichten können sofort oder nach einer spezifizierten Verzögerung gesendet werden.

MIDIMessageEvent

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

MIDIConnectionEvent

Das Ereignis, das an die MIDIAccess statechange und MIDIPort statechange Ereignisse übergeben wird, wenn ein Port verfügbar oder nicht verfügbar wird.

Sicherheitsanforderungen

Der Zugriff auf die API wird unter Verwendung der Methode navigator.requestMIDIAccess() angefordert.

• Die Methode muss in einem sicheren Kontext aufgerufen werden.
• Der Zugriff kann durch die HTTP-Berechtigungsrichtlinie midi gesteuert werden.
• Der Benutzer muss explizit die Erlaubnis erteilen, die API durch einen browserspezifischen Mechanismus zu nutzen, oder bereits zuvor die Erlaubnis erteilt haben. Beachten Sie, dass, wenn der Zugriff durch eine Berechtigungsrichtlinie verweigert wird, er nicht durch eine Benutzergenehmigung erteilt werden kann.

Der Berechtigungsstatus kann mit der Permissions API Methode navigator.permissions.query() abgefragt werden, indem ein Berechtigungsdeskriptor mit der midi Berechtigung und (optional) 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
});

Beispiele

Zugriff auf den MIDI-Port

Die Methode navigator.requestMIDIAccess() gibt ein Promise zurück, das in ein MIDIAccess Objekt aufgelöst wird, welches 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);

Auflisten von Eingaben und Ausgaben

In diesem Beispiel wird die Liste der Eingangs- und Ausgangsports abgerufen und in die 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}'`,
    );
  }
}

Umgang mit MIDI-Eingaben

Dieses Beispiel gibt alle eingehenden MIDI-Nachrichten in die 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;
  });
}

Spezifikationen

Browser-Kompatibilität

api.Navigator.requestMIDIAccess

http.headers.Permissions-Policy.midi

api.Permissions.permission_midi

Siehe auch

• Einführung in Web MIDI
• Musikmachen im Browser