本文将介绍如何使用 npm 包 midi-ports 来在浏览器中获取 MIDI 输入和输出端口。MIDI（Musical Instrument Digital Interface）是一种音频技术，可以用于创建和控制音频设备，如键盘和合成器。
midi-ports 是一个使用 Web MIDI API 实现的 npm 包，可以很容易地在浏览器中获取 MIDI 端口信息。使用该包可以方便地开发针对 MIDI 的应用程序，如音乐编辑器等。在本文中，我们将介绍如何使用 npm 包 midi-ports 来获取 MIDI 输入输出端口信息。
先决条件
在使用 midi-ports 包之前，您需要在浏览器中支持 Web MIDI API。这通常包括以下操作：
- 确保浏览器支持 Web MIDI API。如果您不确定自己的浏览器是否支持，可以访问 caniuse.com 查看浏览器支持情况。
- 启用 MIDI 输入/输出设备。您需要连接 MIDI 设备并将其启用才能够使用 Web MIDI API。例如，在 Windows 操作系统上，您可以打开“设备和打印机”，在 MIDI 设备上右键单击并选择“启用”。
安装 npm 包 midi-ports
在终端中运行以下命令来安装 midi-ports 包：
npm install midi-ports
之后，您可以在项目中使用以下代码来引用 midi-ports 包：
const midiPorts = require("midi-ports");或者，在 ES6 模块中使用：
import midiPorts from "midi-ports";
获取 Midi 输入输出端口
要获取 MIDI 输入输出端口信息，可以使用 midiPorts.getPorts() 方法。该方法返回一个 promise，该 promise 在 MIDI 端口信息可用时解析为包含 MIDI 输入输出端口信息的对象。
以下是使用 midi-ports 包获取 MIDI 输入输出端口的示例代码：
-- -------------------- ---- -------
-- -- ---- ----
---------
-----------
------------- -- -
--------------------------
---------------------------
--
------------ -- -
-------------------
---在上面的代码中，我们使用 getPorts() 方法获取 MIDI 输入输出端口信息，并在 promise 解析时打印了获取到的端口信息。ports.inputs 和 ports.outputs 分别包含 MIDI 输入和输出端口的信息。如果出现错误，promise 将被拒绝并打印错误信息。
Midi 输入输出端口的属性
获取 MIDI 端口信息后，您可以使用以下属性来访问 MIDI 端口的详细信息：
输入端口属性
id：字符串，唯一标识符。name：字符串，MIDI 输入设备的名称。manufacturer：字符串，输入设备的制造商。type：字符串，设备类型，必须是 "input"。state：字符串，设备的状态，可以是 "connected"、"disconnected" 或 "open"。connection：字符串，设备的连接类型，可以是 "open" 或 "closed"。onmidimessage：函数，用于处理 MIDI 消息的回调函数。
输出端口属性
id：字符串，唯一标识符。name：字符串，MIDI 输出设备的名称。manufacturer：字符串，输出设备的制造商。type：字符串，设备类型，必须是 "output"。state：字符串，设备的状态，可以是 "connected"、"disconnected" 或 "open"。connection：字符串，设备的连接类型，可以是 "open" 或 "closed"。
示例
以下是一个完整的示例，该示例演示如何在浏览器中使用 npm 包 midi-ports 来获取 MIDI 输入输出端口信息：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
----------------- ----------
-------
------
-------- --------------
---- -------------------
------- --------------
------ --------- ---- -------------------------------------
---------
-----------
------------- -- -
----- ------- - -----------------------------------
----------------- --
---------------- ----------------------- -
------------
-----
------- --
-----------------------------------------------------
-
--------- -
--------
----------------- --
---------------- ----------------------- -
-------------
-----
-------- --
-------------------------------------------------------
-
--------- -
--------
--
------------ -- -
-------------------
---
---------
-------
-------在上面的示例中，我们使用了 import midiPorts from "https://cdn.skypack.dev/midi-ports" 来获取来自 CDN 的 midi-ports 库。我们通过 getPorts() 方法获取 MIDI 输入输出端口的信息，并将其渲染到页面上。
结论
midi-ports 是一个非常有用的 npm 包，可用于在浏览器中获取 MIDI 输入输出端口信息。在本文中，我们介绍了如何使用该包来获取 MIDI 输入输出端口，并访问了 MIDI 输入输出端口的属性。该包可以方便地为 MIDI 应用程序开发人员提供帮助，如音乐编辑器等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f481d8e776d0804117d