在前端开发过程中，我们有时需要通过 MIDI 设备控制网页上的元素。Web MIDI API 是浏览器提供的用于处理 MIDI 设备的 API，但是该 API 只能在支持的浏览器上使用，且使用起来有一些不便之处。因此，开发者们开发了许多用于处理 Web MIDI API 的 npm 包。其中，webmidiapishim 是一种使用方便的 npm 包，它可以帮助我们轻松访问 MIDI 设备并处理 MIDI 事件。这篇文章将会介绍 webmidiapishim 的使用教程。
安装
可以使用 npm 安装 webmidiapishim。在终端中执行以下命令即可：
npm install webmidiapishim
引入
在代码中可以使用 import 或 require 方式引入 webmidiapishim：
import WebMidiAPIShim from "webmidiapishim";
// 或者
const WebMidiAPIShim = require("webmidiapishim");初始化
在使用 webmidiapishim 之前，我们需要使用 Init 方法初始化 MIDI 系统：
WebMidiAPIShim.Init().then(() => {
console.log("MIDI 系统已初始化");
// 调用其它 API，如输出 MIDI 消息等
}, (err) => {
console.error("MIDI 系统初始化失败", err);
});在调用其它 API 之前，最好在 Promise 回调函数中处理 Promise 的结果。
访问 MIDI 输入设备
使用 getInput 方法可以访问 MIDI 输入设备。例如：
-- -------------------- ---- -------
----- ------ - --------------------------
-- ---------------- -
------------------ ---- -----
- ---- -
------------------ ---- --------
---------------------- ------ -- -
------------- --------- ----------------
---
-可以在用户输入之后选择相应的设备。
监听 MIDI 事件
使用 addListener 方法可以为 MIDI 输入设备添加事件监听器。例如：
const input = inputs[0];
const listener = (event) => {
console.log(`收到 MIDI 事件：${event}`);
};
input.addListener("midimessage", listener);当 MIDI 输入设备发送消息时，该事件将会被触发，事件的参数是包含消息信息的 MIDIMessageEvent 对象。可以在事件监听器中处理 MIDI 消息。
当不需要事件监听器的时候，记得使用 removeListener 方法移除事件监听器：
input.removeListener("midimessage", listener);输出 MIDI 消息
使用 getOutput 方法可以访问 MIDI 输出设备。然后，使用 send 方法可以向 MIDI 输出设备发送 MIDI 消息。例如：
-- -------------------- ---- -------
----- ------- - ---------------------------
-- ---------------- -
----- ------ - -----------
------------------ --- ------
------------- -- -
------------------ --- ----
-- ------
- ---- -
----------------- ---- -------
-该代码会向第一个 MIDI 输出设备发送一个音符 ON 消息，持续 1 秒钟之后，发送一个音符 OFF 消息。
总结
在本文中，我们介绍了 npm 包 webmidiapishim 的使用教程。该包提供方便的 API 用于访问 MIDI 设备并处理 MIDI 事件。如果你需要在网页上处理 MIDI 设备，则可以尝试使用该包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671058dd3466f61ffdd0b