Die Web MIDI API verbindet sich mit und interagiert mit Musical Instrument Digital Interface (MIDI)-Geräten.

Die Schnittstellen befassen sich mit den praktischen Aspekten des Sendens und Empfangens von MIDI-Nachrichten.Daher kann die API sowohl für musikalische als auch nicht-musikalische Zwecke verwendet werden, mit jedem MIDI-Gerät, das mit Ihrem Computer verbunden ist.

Schnittstellen

MIDIInputMap

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

MIDIOutputMap

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

MIDIAccess

Bietet die Methoden zum Auflisten von Eingabe- und Ausgabegeräten und zum Zugreifen auf ein einzelnes Gerät.

MIDIPort

Repräsentiert einen einzelnen MIDI-Port.

MIDIInput

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

MIDIOutput

Warteschlangen-Nachrichten an den verbundenen MIDI-Port. Nachrichten können sofort oder nach einer festgelegten Verzögerung gesendet werden.

MIDIMessageEvent

Das Ereignis, das an dasMIDIInputmidimessage-Ereignis übergeben wird.

MIDIConnectionEvent

Das Ereignis, das an dieMIDIAccessstatechange undMIDIPortstatechange-Ereignisse übergeben wird, wenn ein Port verfügbar oder nicht verfügbar wird.

Sicherheitsanforderungen

Der Zugriff auf die API wird mithilfe dernavigator.requestMIDIAccess()-Methode angefordert.

• Die Methode muss in einemsicheren Kontext aufgerufen werden.
• Der Zugriff kann durch diemidi HTTP-Berechtigungsrichtlinie begrenzt sein.
• Der Benutzer muss ausdrücklich die Erlaubnis erteilen, die API zu verwenden, über einen benutzerspezifischen Mechanismus oder hat zuvor die Erlaubnis erteilt.Beachten Sie, dass, wenn der Zugriff durch eine Berechtigungsrichtlinie verweigert wird, er nicht durch eine Benutzerberechtigung gewährt werden kann.

Der Berechtigungsstatus kann mithilfe derPermissions API-Methodenavigator.permissions.query() abgefragt werden, indem ein Berechtigungsdeskriptor mit dermidi Berechtigung und der (optionalen)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 erhalten

Dienavigator.requestMIDIAccess() Methode gibt ein Versprechen zurück, das auf einMIDIAccess-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 objectfunction 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 werden die Listen der Eingabe- und Ausgangsports 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}'`,    );  }}

Verarbeitung von MIDI-Eingaben

Dieses Beispiel druckt alle MIDI-Eingangsnachrichten 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