Web MIDI API
Web MIDI API 连接并与乐器数字接口 (MIDI) 设备交互。
这些接口处理发送和接收 MIDI 消息的实际方面。因此,该 API 可用于音乐和非音乐用途,以及与您的计算机连接的任何 MIDI 设备。
接口
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 的权限,或者之前已授予权限。请注意,如果权限策略拒绝访问,则用户权限无法授予。
可以使用权限 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 表仅在浏览器中加载