JavaScript 浏览器 Web MIDI API 控制乐器怎么做-js教程-PHP中文网

javascript通过web midi api控制硬件乐器需四步：先请求midi权限并监听设备热插拔；再选择并打开真实输出端口；接着用port.send()发送标准3字节midi消息（如音符、cc、程序改变）；最后可选监听输入实现反向控制，注意通道设置与设备配置。

javascript 浏览器 web midi api 控制乐器怎么做

用 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”）。

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

用 midiAccess.outputs.forEach(port => console.log(port.name, port.manufacturer)) 查看真实设备名
调用 port.open() 建立连接（多数现代设备无需额外操作，但某些老设备可能要求先发送 SysEx 初始化）
注意：一个端口只能被一个网页独占；若其他标签页已占用，当前页将无法发送数据

第三步：发送标准 MIDI 消息控制声音

控制乐器靠的是 3 字节 MIDI 消息，格式为 [status, data1, data2]。Web MIDI 使用 port.send() 发送 Uint8Array 数组。

弹音符：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）验证设备收发是否正常，能省下大量调试时间。