Web MIDI API

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 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.

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

• Die Methode muss in einem sicheren Kontext aufgerufen werden.
• Der Zugriff kann durch die midi 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 der Permissions API-Methode navigator.permissions.query() abgefragt werden, indem ein Berechtigungsdeskriptor mit der midi 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
});

Die navigator.requestMIDIAccess() Methode gibt ein Versprechen 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 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}'`,
    );
  }
}

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;
  });
}

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