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