Web MIDI API

安全上下文:此功能仅在安全上下文(HTTPS)中可用,部分或所有支持的浏览器中可用。

Web MIDI API 连接并与乐器数字接口 (MIDI) 设备交互。

这些接口处理发送和接收 MIDI 消息的实际方面。因此,该 API 可用于音乐和非音乐用途,以及与您的计算机连接的任何 MIDI 设备。

接口

MIDIInputMap

表示所有可用的 MIDI 输入端口。

MIDIOutputMap

表示所有可用的 MIDI 输出端口。

MIDIAccess

提供列出输入和输出设备以及访问单个设备的方法。

MIDIPort

表示单个 MIDI 端口。

MIDIInput

提供处理来自输入端口的 MIDI 消息的方法。

MIDIOutput

将消息排队到链接的 MIDI 端口。消息可以立即发送或在指定的延迟后发送。

MIDIMessageEvent

传递到MIDIInputmidimessage 事件的事件。

MIDIConnectionEvent

传递到MIDIAccessstatechangeMIDIPortstatechange 事件的事件,当端口变为可用或不可用时。

安全要求

使用navigator.requestMIDIAccess() 方法请求访问 API。

  • 该方法必须在安全上下文中调用。
  • 访问可能受到midi HTTP权限策略的限制。
  • 用户必须通过特定于用户代理的机制明确授予使用 API 的权限,或者之前已授予权限。请注意,如果权限策略拒绝访问,则用户权限无法授予。

可以使用权限 API 方法navigator.permissions.query() 查询权限状态,传递具有midi 权限和(可选)sysex 属性的权限描述符

js
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() 方法返回一个 promise,该 promise 解析为MIDIAccess 对象,然后可以使用该对象访问 MIDI 设备。该方法必须在安全上下文中调用。

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

列出输入和输出

在此示例中,将检索输入和输出端口列表并将其打印到控制台。

js
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 输入消息打印到控制台。

js
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

浏览器兼容性

api.Navigator.requestMIDIAccess

BCD 表仅在浏览器中加载

http.headers.Permissions-Policy.midi

BCD 表仅在浏览器中加载

api.Permissions.permission_midi

BCD 表仅在浏览器中加载

另请参阅