Web MIDI API

Schnittstellen

MIDIInputMap

Repräsentiert alle verfügbaren MIDI-Eingangsanschlüsse.

MIDIOutputMap

Repräsentiert alle verfügbaren MIDI-Ausgangsanschlüsse.

MIDIAccess

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

MIDIPort

Repräsentiert einen einzelnen MIDI-Anschluss.

MIDIInput

Bietet eine Methode zum Umgang mit MIDI-Nachrichten von einem Eingangsanschluss.

MIDIOutput

Wartet Nachrichten zur verbundenen MIDI-Schnittstelle. Nachrichten können sofort oder nach einer angegebenen 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 Anschluss verfügbar oder nicht verfügbar wird.

Sicherheitsanforderungen

Der Zugriff auf die API wird durch Aufrufen der Methode navigator.requestMIDIAccess() angefordert.

• Die Methode muss in einem sicheren Kontext aufgerufen werden.
• Der Zugriff kann durch die midi HTTP Permission Policy eingeschränkt sein.
• Der Benutzer muss explizit die Erlaubnis zur Nutzung der API über einen benutzerspezifischen Mechanismus erteilen oder zuvor die Erlaubnis erteilt haben. Beachten Sie, dass, wenn der Zugriff durch eine Permission Policy verweigert wird, dieser 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 der (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-Anschluss erlangen

Die Methode navigator.requestMIDIAccess() gibt ein Versprechen zurück, das zu einem 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);

Eingaben und Ausgaben auflisten

In diesem Beispiel werden die Listen der Eingabe- und Ausgangsanschlüsse abgerufen und in die Konsole gedruckt.

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}'`,
    );
  }
}

MIDI-Eingaben handhaben

Dieses Beispiel druckt alle MIDI-Eingabenachrichten in die Konsole.

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
• Musik im Browser machen