JavaScript通过Web MIDI API控制硬件乐器需四步：先请求MIDI权限并监听设备热插拔；再选择并打开真实输出端口；接着用port.send()发送标准3字节MIDI消息（如音符、CC、程序改变）；最后可选监听输入实现反向控制，注意通道设置与设备配置。
用 JavaScript 通过 Web MIDI API 控制硬件乐器，核心是建立浏览器与 MIDI 设备的通信链路，再发送标准 MIDI 消息（如音符开/关、控制变化等）。它不依赖插件，但需要用户主动授权、设备正确连接，且仅在安全上下文（HTTPS 或 localhost）中可用。
第一步：请求并获取 MIDI 访问权限
Web MIDI API 默认禁用，必须显式请求访问权限。调用 navigator.requestMIDIAccess() 后，用户会在浏览器地址栏看到“允许”提示（Chrome/Firefox 支持较好，Safari 仅部分支持）。
- 成功后返回
MIDIAccess对象，从中可列出输入（键盘、控制器）和输出（合成器、音源、带 MIDI IN 的乐器）设备 - 务必监听
statechange事件——设备热插拔（比如插上 USB MIDI 键盘）会触发此事件，方便动态更新设备列表 - 若返回
undefined或报错，检查是否在 HTTPS 页面运行、浏览器是否支持、系统 MIDI 驱动是否正常（macOS 通常即插即用；Windows 可能需安装厂商驱动）
第二步：选择并打开目标输出设备
不是所有“输出设备”都能发声——有些只是虚拟端口或调试接口。真正控制乐器，需选中对应硬件的输出端口（例如 “Akai MPK Mini Play Port-1” 或 “Yamaha MODX6 MIDI OUT”）。
- 用
midiAccess.outputs.forEach(port => console.log(port.name, port.manufacturer))查看真实设备名 - 调用
port.open()建立连接（多数现代设备无需额外操作，但某些老设备可能要求先发送 SysEx 初始化） - 注意：一个端口只能被一个网页独占；若其他标签页已占用，当前页将无法发送数据
第三步：发送标准 MIDI 消息控制声音
控制乐器靠的是 3 字节 MIDI 消息，格式为 [status, data1, data2]。Web MIDI 使用 port.send() 发送 Uint8Array 数组。
立即学习“Java免费学习笔记（深入）”；
-
弹音符：C4（MIDI 音符 60）力度 100 →
port.send([0x90, 60, 100])；释放 →port.send([0x80, 60, 0]) -
调音量/声像：CC#7（主音量）→
port.send([0xB0, 7, 127])；CC#10（声像）→port.send([0xB0, 10, 64]) -
切换音色：程序改变（Program Change）→
port.send([0xC0, 32])（选第 33 个音色，从 0 开始计数） - 所有消息默认发到通道 1（0x90 中的 0 表示通道 1）；如需多通道，改 status 字节高位（如通道 2 是 0x91）
第四步：处理输入（可选）——让乐器反向控制网页
若想用键盘弹奏实时驱动网页可视化，或用旋钮调节参数，需监听输入端口的 midimessage 事件。
- 绑定事件：
inputPort.onmidimessage = (event) => { const [cmd, note, vel] = event.data; if (cmd === 0x90 && vel > 0) console.log('按下', note); } - 注意过滤 0 速度的 Note On（实际是 Note Off），或直接监听 Note Off（0x80）更准确
- 旋钮/推子发送的是 CC（0xB0）消息，data1 是控制器编号（如 1=调制轮，7=音量），data2 是值（0–127）
不复杂但容易忽略：确保乐器本身设置为接收对应 MIDI 通道、未开启本地控制（Local Control OFF），否则按键会直通发声而绕过电脑信号；发送前用系统自带工具（macOS Audio MIDI Setup、Windows MIDI-OX）验证设备收发是否正常，能省下大量调试时间。
