介绍
在 Web 前端应用中，与硬件打交道的场景越来越常见。而处理 MIDI 消息也不再是独属于桌面应用的领域。@mohayonao/midi-device 是一个能够让你通过 WebMIDI API 检测 MIDI 设备的 npm 包。
安装
使用 npm 安装 @mohayonao/midi-device：
npm install @mohayonao/midi-device
使用
在你的前端应用中引入并使用 @mohayonao/midi-device：
import MidiDevice from '@mohayonao/midi-device'
MidiDevice.enumerate().then((midiDevices) => {
// 在这里对 midiDevices 进行处理
}).catch((err) => {
// 处理错误
})这个例子展示了如何使用 MidiDevice.enumerate() 方法来枚举所有 MIDI 设备。在上面的代码中，promise 会返回一个 MIDI 设备信息的数组。在数组中，每个 midiDevices[index] 包含以下基本信息：
| 属性 | 类型 | 描述 |
|---|---|---|
| id | string | 设备 id |
| manufacturer | string | 制造商 |
| name | string | 设备名称 |
| type | string | 设备类型 (“input”, “output”) |
| version | string | 设备的版本号，通常为“1” |
| state | string | 设备的连接状态 |
| connection | string | 设备的连接类型 (“closed”, “open”, “pending”)。这些值表示设备是否被打开，并且是否成功连接到系统。 |
| onstatechange | function | 设备连接状态发生变化时回调函数 |
| addEventListener | function | 添加互动事件侦听器的功能。(e.g. “inputdata”, “statechange”, etc) |
下面是针对 midiDevices 数组的更复杂示例：
-- -------------------- ---- -------
------ ---------- ---- ------------------------
----------------------------------------- -- -
-------------------------------- -- -
----- - ----- ----- ------------- - - ----------
-- ------
-- ----- --- -------- -
----- ----------- - -
--- --------------
-----
-----
-------------
-
-------------------- ----------
------------------------- - --- -- -
-- -------------------- --- ------- -
----------------------------------
-- ---- -- ------ ----- -------- ---- ----- -------
- ---- -- -------------------- --- --------- -
----------------------------------
-- ---- -- ------ ---- ----- -------
-
-
-
-- ------
-- ----- --- --------- -
----- ------------ - -
--- --------------
-----
-----
-------------
-
-------------------- ----------
-------------------------- - --- -- -
-- -------------------- --- ------- -
----------------------------------
-- ---- -- ------ ----- -------- ---- ------ -------
- ---- -- -------------------- --- --------- -
----------------------------------
-- ---- -- ------ ---- ------ -------
-
-
-
--
-------------- -- -
---------------------- ----
--上面的代码展示了如何在 Web 应用中检测 MIDI 设备，并针对输入和输出设备可分别进行不同的事件处理。
总结一下，使用 @mohayonao/midi-device 可以：
- 进行多种对 MIDI 设备的检测
- 灵活处理应用程序所需的事件
- 熟练掌握调试技巧来进一步加强对 Web MIDI API 及其应用的理解。
参考文献：
- @mohayonao/midi-device
- Web MIDI API Specification
- [Web MIDI API - MDN] (https://developer.mozilla.org/en-US/docs/Web/API/MIDIAccess)
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e2447ba