Web MIDI API

介面

MIDIInputMap: 表示所有可用的 MIDI 輸入埠。
MIDIOutputMap: 表示所有可用的 MIDI 輸出埠。
MIDIAccess: 提供列出輸入和輸出裝置以及訪問單個裝置的方法。
MIDIPort: 表示單個 MIDI 埠。
MIDIInput: 提供處理來自輸入埠的 MIDI 訊息的方法。
MIDIOutput: 將訊息排隊到連結的 MIDI 埠。訊息可以立即傳送，也可以在指定的延遲後傳送。
MIDIMessageEvent: 傳遞給 MIDIInput midimessage 事件的事件。
MIDIConnectionEvent: 當埠可用或不可用時，傳遞給 MIDIAccess statechange 和 MIDIPort statechange 事件的事件。

安全要求

使用 navigator.requestMIDIAccess() 方法請求訪問 API。

必須在安全上下文中呼叫該方法。
訪問可能受 midi HTTP 許可權策略的限制。
使用者必須透過使用者代理特定的機制明確授予使用該 API 的許可權，或者之前已授予許可權。請注意，如果訪問被許可權策略拒絕，則無法透過使用者許可權授予。

可以使用 Permissions API 方法 navigator.permissions.query() 查詢許可權狀態，並傳遞一個帶有 midi 許可權和（可選）sysex 屬性的許可權描述符。

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

示例

獲取 MIDI 埠的訪問許可權

navigator.requestMIDIAccess() 方法返回一個解析為 MIDIAccess 物件的 Promise，然後可以使用該物件訪問 MIDI 裝置。該方法必須在安全上下文中呼叫。

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

列出輸入和輸出

在此示例中，輸入和輸出埠的列表被檢索並列印到控制檯。

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 輸入

此示例將所有 MIDI 輸入訊息列印到控制檯。

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

規範

規範
Web MIDI API

介面

安全要求

示例

獲取 MIDI 埠的訪問許可權

列出輸入和輸出

處理 MIDI 輸入

規範

瀏覽器相容性

api.Navigator.requestMIDIAccess

http.headers.Permissions-Policy.midi

api.Permissions.permission_midi

另見

幫助改進 MDN