用WebMidi将脚趾浸入硬件

您是否知道有一个良好支持的浏览器API，可以使用更早的Web的成熟协议与有趣甚至自定义的硬件进行连接？让我向您介绍MIDI和Webmidi API，并向您展示它如何为前端开发人员提供独特的机会，使其在硬件编程世界中闯入浏览器并涉足硬件编程世界，而不会留下JavaScript和DOM的相对舒适感。

MIDI和Webmidi到底是什么？

MIDI是一种用于乐器互相交流的利基协议。它在1983年进行了标准化，直到今天由由音乐行业公司和代表组成的组织维持。从某种意义上说，这与W3C的指示和保留​​网络标准的方式并没有大不相同。

WebMIDI API是基于浏览器的该协议的实现，它允许我们的Web应用程序“说” MIDI并与可能连接到用户设备的任何具有MIDI功能的硬件进行通信。

不是音乐家吗？不用担心！我们会很快发现，为电子乐器设计的这个简单协议可用于构建有趣，互动和完全非音乐的事物。

我为什么要这样做？

很棒的问题。最短的答案：因为很有趣！

如果这个答案对您来说不足以满足，我会提供的：创建一些跨越物理世界和虚拟世界之间的界限，我们花费大部分时间来建立事物，这是一种很好的练习。这是一个创造性修补以及考虑和创建新的用户界面和经验进行导航的机会。我真的认为，这种有趣的探索有助于我们使用大脑的不同部分，并使我们在长途旅行中更好地开发人员。

我可以建造什么样的东西？

我需要开始什么？

以下是开始尝试WebMidi的先决条件：

MIDI控制器

这可能是最棘手的部分。您需要采购具有MIDI功能的硬件进行实验。您也许可以在Craigslist，Amazon或Aliexpress上找到便宜的东西。或者 - 如果您真的很雄心勃勃，并且拥有一个Arduino，则可以建立自己的（有关此信息的更多信息，请参见本文的结尾）。

具有Webmidi的浏览器

此浏览器支持数据来自Caniuse，其中有更多详细信息。一个数字表明浏览器在该版本及以上支持该功能。

桌面

移动 /平板电脑

根据Caniuse.com的说法，在撰写本文时，大约有73％的浏览器支持它，尽管大多数重型是由Chromium完成的。任何基于铬的浏览器都将支持WebMidi，其中包括电子应用和较新的基于铬的Microsoft Edge。它也支持Opera和Samsung Internet浏览器。在Firefox上，它仍在讨论中，但希望更快地来临。

您好，Webmidi

一旦您购买了这两种内容，我们就可以开始编写一些代码！使用WebMidi与使用其他浏览器API（如GeOlocation或MediaDevices API）合作，如果您熟悉这两个API。

高级流程看起来像这样：

• 我们在浏览器中检测到Webmidi API的可用性。
• 如果检测到，我们请求用户许可访问它。
• 一旦获得许可，我们现在就可以访问其他方法来检测并与任何连接的MIDI设备进行通信。

让我们看看这一点：

 if（Navigator中的“ requestMidiaCcess”）{
  // Web Midi API可供我们使用！
}

现在，假设我们在具有Webmidi的浏览器中，让我们请求访问：

 navigator.requestmidiaccess（）
。
  //用户授予我们许可。现在我们可以
  //访问连接的MIDI功能设备
  //到用户的计算机。
}））
.catch（（error）=＆gt; {
  //未授予许可。 :(
}）;

如果用户授予我们许可，我们现在应该可以访问Midiaccess接口。这有助于我们构建可以从中收到MIDI输入并将MIDI输出发送到的设备列表。

接下来让我们这样做。这是我们传递到的函数内部的代码，然后从上一个代码片段中传递到的代码：

 const inputs = access.inputs;
const输出= access.outputs;

//遍历每个连接的MIDI输入设备
inputs.foreach（（MIDIINPUT）=＆gt; {
  //使用MIDI输入设备做点什么
}）;

//遍历每个连接的MIDI输出设备
outputs.foreach（（（midiOutput）=＆gt; {
  //使用MIDI输出设备做点什么 
}）;

您可能想知道MIDI输入设备和输出设备之间的区别是什么。设置了一些设备，仅将MIDI信息发送到计算机（这些将被列为输入），而其他设备可以从计算机接收信息（这些将以输出形式出现）。可以发送和接收设备并不少见，因此您会在两者下都列出。

现在，我们有可以迭代所有连接的MIDI设备的代码，基本上只有两件事要做。

• 如果是输入设备，我们将要收听从中发出的任何传入的MIDI消息。
• 如果是输出设备，我们可能需要向其发送MIDI消息。

设置事件侦听器以响应我们输入设备的任何传入的MIDI消息的代码看起来与您可能为其他DOM事件设置的事件侦听器非常相似，除非在这种情况下，我们正在侦听的事件是Midimessage事件：

 midiinput.AddeventListener（'Midimessage'，（event）=＆gt; {
  //`event'对象将具有`data'属性
  //包含3个数字的数组。例如：
  // [144，63，127]
}））

如果我们想向输出设备发送MIDI消息，则可以这样做的代码；

 outputsend（[144，63，127]）;

这是一个编码epen演示，其中大部分都为您组合在一起。它将让您知道连接到系统的所有MIDI输入和输出设备，并向您展示传入的MIDI消息时：

看到笔
乔治·曼迪斯（@georgemandis）的WebMidi基本测试
在Codepen上。

在这一点上，您可能想知道几件事：

• 当您收听中等事件时，如何在Event.data中制作三个数字数组的头或尾巴？
• 您为什么要向MIDI输出设备发送三个数字的数组，为什么要发送这些特定的数字？

这两个问题的答案在于进一步探索和了解MIDI协议的工作原理及其旨在解决的问题。

MIDI消息的解剖

当MIDI控制器对另一台具有MIDI功能的设备或计算机“说话”时，他们将彼此发送和接收MIDI消息。在实践中，这种通信的基础协议非常简单，但是在解释时有点详细。不过，我会尝试的。

每个MIDI消息由三个字节组成，由8位组成（0-255）。在二进制中代表，一条消息可能看起来像这样：

 10010000 | 00111100 | 0111111

MIDI消息只有两种类型：状态和数据。每个消息都将包含一个状态字节和两个数据字节。

状态字节旨在传达要传递哪种信息，包括以下内容：

• 注意
• 注意
• 音高弯曲变化
• 控制/模式更改
• 程序更改

……还有许多其他。

如果您是从非音乐背景来的，这些状态消息似乎有点奇怪，但不要担心它太多。数据字节旨在为状态提供更多信息和上下文。举个例子，如果我将MIDI钢琴插入我的计算机上，然后按键弹奏音符，它将发送“注释”状态字节，并附有数据字节，指示我播放了哪个音符，也许我按下了它的难度。

状态字节将始终从数字1和数字0开始。

 1x0010000 | 0x0111100 | 0x111111
    ^状态 ^data1 ^data2

对于留下7位以表达该字节中数据的数据字节。这使我们的整数范围为0-127。

对于状态字节，第一次描述状态消息类型后的下一个3位，其余4位描述了频道。分解我们的二进制表示：

 1x001x0000

这如何转化为Webmidi和JavaScript

正如您之前从代码示例中猜到的那样，使用WebMidi API，我们很少必须直接处理这些二进制表示。当我们在JavaScript中发送和接收这些消息时，我们只需使用这样的数组：

 [144，63，127]

如果您正在使用现有的音乐硬件，那么对信息的结构方式和为什么以它们的方式进行了更深入的了解是有帮助的。知道在第一个字节中接收144的意思是在第一个频道中打开音符，并且128表示正在关闭音符，这是有帮助的。

但是，如果我们正在建立非音乐体验并创建自己的硬件，则可以重新使用这些数字以表示您想要的任何东西！

我可以使用什么样的硬件？

可以通过WebMidi API访问可以连接到计算机的任何具有MIDI功能的设备。能够将MIDI数据发送到另一个具有MIDI功能的设备的设备通常称为MIDI控制器。一个常见的例子是一个简单的钢琴风格的键盘，例如Korg Nanokey2：

但是它们的外观和相互作用方式可能会差异很大。当然，按钮很常见，但是您可能还会发现一些包含表盘或压力敏感垫，例如Akai LPD8：

其他人则使用更抽象和有趣的互动方式，包括将运动或呼吸映射到MIDI信号。例如，该控制器（来自源音频的Hothand）使用三个加速度计将手势映射到MIDI消息：

一些控制器都可以发送和接收MIDI消息，从而使您与物理世界进行真正的双向对话。 Novation LaunchPad是一个典型的示例 - 可以按下按钮发送消息，也可以收到消息以动态更改设备上的颜色：

我可以构建自己的硬件吗？

事实证明，它们并不难于建造，您可以在野外找到很多自制的MIDI控制器。他们可以急忙获得更多的详尽。有些可以是彻底的香蕉：

构建自己的MIDI控制器将带您在JavaScript世界之外，但是如果您熟悉或对Arduino平台感兴趣，仍然可以访问它。 Adafruit的电路游乐场经典赛是开始使用的绝佳设备，您可以找到启动代码闪烁到设备，并将其插入GitHub上的多方面MIDI控制器。

概括

Webmidi API是前端开发人员开始尝试基本硬件和软件交互的低速度进入方式。与其他一些硬件Web API（例如蓝牙）相比，该实现相对简单，并且MIDI标准有据可查。有很多现有的具有MIDI功能的设备可以进行实验或构建酷炫的东西，如果您真的想全力以赴并开始为您的项目构建自己的自定义MIDI硬件，那么也可以做到这一点。

去那里做点什么！

以上是用WebMidi将脚趾浸入硬件的详细内容。更多信息请关注PHP中文网其他相关文章！