您是否知道有一個良好支持的瀏覽器API，可以使用更早的Web的成熟協(xié)議與有趣甚至自定義的硬件進行連接？讓我向您介紹MIDI和Webmidi API，并向您展示它如何為前端開發(fā)人員提供獨特的機會，使其在硬件編程世界中闖入瀏覽器并涉足硬件編程世界，而不會留下JavaScript和DOM的相對舒適感。

MIDI和Webmidi到底是什么？

MIDI是一種用于樂器互相交流的利基協(xié)議。它在1983年進行了標準化，直到今天由由音樂行業(yè)公司和代表組成的組織維持。從某種意義上說，這與W3C的指示和保留??網(wǎng)絡(luò)標準的方式并沒有大不相同。

WebMIDI API是基于瀏覽器的該協(xié)議的實現(xiàn)，它允許我們的Web應(yīng)用程序“說” MIDI并與可能連接到用戶設(shè)備的任何具有MIDI功能的硬件進行通信。

不是音樂家嗎？不用擔(dān)心！我們會很快發(fā)現(xiàn)，為電子樂器設(shè)計的這個簡單協(xié)議可用于構(gòu)建有趣，互動和完全非音樂的事物。

我為什么要這樣做？

很棒的問題。最短的答案：因為很有趣！

如果這個答案對您來說不足以滿足，我會提供的：創(chuàng)建一些跨越物理世界和虛擬世界之間的界限，我們花費大部分時間來建立事物，這是一種很好的練習(xí)。這是一個創(chuàng)造性修補以及考慮和創(chuàng)建新的用戶界面和經(jīng)驗進行導(dǎo)航的機會。我真的認為，這種有趣的探索有助于我們使用大腦的不同部分，并使我們在長途旅行中更好地開發(fā)人員。

我可以建造什么樣的東西？

我需要開始什么？

以下是開始嘗試WebMidi的先決條件：

MIDI控制器

這可能是最棘手的部分。您需要采購具有MIDI功能的硬件進行實驗。您也許可以在Craigslist，Amazon或Aliexpress上找到便宜的東西?；蛘?- 如果您真的很雄心勃勃，并且擁有一個Arduino，則可以建立自己的（有關(guān)此信息的更多信息，請參見本文的結(jié)尾）。

具有Webmidi的瀏覽器

此瀏覽器支持數(shù)據(jù)來自Caniuse，其中有更多詳細信息。一個數(shù)字表明瀏覽器在該版本及以上支持該功能。

桌面

移動 /平板電腦

根據(jù)Caniuse.com的說法，在撰寫本文時，大約有73％的瀏覽器支持它，盡管大多數(shù)重型是由Chromium完成的。任何基于鉻的瀏覽器都將支持WebMidi，其中包括電子應(yīng)用和較新的基于鉻的Microsoft Edge。它也支持Opera和Samsung Internet瀏覽器。在Firefox上，它仍在討論中，但希望更快地來臨。

您好，Webmidi

一旦您購買了這兩種內(nèi)容，我們就可以開始編寫一些代碼！使用WebMidi與使用其他瀏覽器API（如GeOlocation或MediaDevices API）合作，如果您熟悉這兩個API。

高級流程看起來像這樣：

• 我們在瀏覽器中檢測到Webmidi API的可用性。
• 如果檢測到，我們請求用戶許可訪問它。
• 一旦獲得許可，我們現(xiàn)在就可以訪問其他方法來檢測并與任何連接的MIDI設(shè)備進行通信。

讓我們看看這一點：

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

現(xiàn)在，假設(shè)我們在具有Webmidi的瀏覽器中，讓我們請求訪問：

 navigator.requestmidiaccess（）
。
  //用戶授予我們許可?，F(xiàn)在我們可以
  //訪問連接的MIDI功能設(shè)備
  //到用戶的計算機。
}））
.catch（（error）=＆gt; {
  //未授予許可。 :(
}）;

如果用戶授予我們許可，我們現(xiàn)在應(yīng)該可以訪問Midiaccess接口。這有助于我們構(gòu)建可以從中收到MIDI輸入并將MIDI輸出發(fā)送到的設(shè)備列表。

接下來讓我們這樣做。這是我們傳遞到的函數(shù)內(nèi)部的代碼，然后從上一個代碼片段中傳遞到的代碼：

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

//遍歷每個連接的MIDI輸入設(shè)備
inputs.foreach（（MIDIINPUT）=＆gt; {
  //使用MIDI輸入設(shè)備做點什么
}）;

//遍歷每個連接的MIDI輸出設(shè)備
outputs.foreach（（（midiOutput）=＆gt; {
  //使用MIDI輸出設(shè)備做點什么 
}）;

您可能想知道MIDI輸入設(shè)備和輸出設(shè)備之間的區(qū)別是什么。設(shè)置了一些設(shè)備，僅將MIDI信息發(fā)送到計算機（這些將被列為輸入），而其他設(shè)備可以從計算機接收信息（這些將以輸出形式出現(xiàn)）。可以發(fā)送和接收設(shè)備并不少見，因此您會在兩者下都列出。

現(xiàn)在，我們有可以迭代所有連接的MIDI設(shè)備的代碼，基本上只有兩件事要做。

• 如果是輸入設(shè)備，我們將要收聽從中發(fā)出的任何傳入的MIDI消息。
• 如果是輸出設(shè)備，我們可能需要向其發(fā)送MIDI消息。

設(shè)置事件偵聽器以響應(yīng)我們輸入設(shè)備的任何傳入的MIDI消息的代碼看起來與您可能為其他DOM事件設(shè)置的事件偵聽器非常相似，除非在這種情況下，我們正在偵聽的事件是Midimessage事件：

 midiinput.AddeventListener（'Midimessage'，（event）=＆gt; {
  //`event'對象將具有`data'屬性
  //包含3個數(shù)字的數(shù)組。例如：
  // [144，63，127]
}））

如果我們想向輸出設(shè)備發(fā)送MIDI消息，則可以這樣做的代碼；

 outputsend（[144，63，127]）;

這是一個編碼epen演示，其中大部分都為您組合在一起。它將讓您知道連接到系統(tǒng)的所有MIDI輸入和輸出設(shè)備，并向您展示傳入的MIDI消息時：

看到筆
喬治·曼迪斯（@georgemandis）的WebMidi基本測試
在Codepen上。

在這一點上，您可能想知道幾件事：

• 當(dāng)您收聽中等事件時，如何在Event.data中制作三個數(shù)字數(shù)組的頭或尾巴？
• 您為什么要向MIDI輸出設(shè)備發(fā)送三個數(shù)字的數(shù)組，為什么要發(fā)送這些特定的數(shù)字？

這兩個問題的答案在于進一步探索和了解MIDI協(xié)議的工作原理及其旨在解決的問題。

MIDI消息的解剖

當(dāng)MIDI控制器對另一臺具有MIDI功能的設(shè)備或計算機“說話”時，他們將彼此發(fā)送和接收MIDI消息。在實踐中，這種通信的基礎(chǔ)協(xié)議非常簡單，但是在解釋時有點詳細。不過，我會嘗試的。

每個MIDI消息由三個字節(jié)組成，由8位組成（0-255）。在二進制中代表，一條消息可能看起來像這樣：

 10010000 | 00111100 | 0111111

MIDI消息只有兩種類型：狀態(tài)和數(shù)據(jù)。每個消息都將包含一個狀態(tài)字節(jié)和兩個數(shù)據(jù)字節(jié)。

狀態(tài)字節(jié)旨在傳達要傳遞哪種信息，包括以下內(nèi)容：

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

……還有許多其他。

如果您是從非音樂背景來的，這些狀態(tài)消息似乎有點奇怪，但不要擔(dān)心它太多。數(shù)據(jù)字節(jié)旨在為狀態(tài)提供更多信息和上下文。舉個例子，如果我將MIDI鋼琴插入我的計算機上，然后按鍵彈奏音符，它將發(fā)送“注釋”狀態(tài)字節(jié)，并附有數(shù)據(jù)字節(jié)，指示我播放了哪個音符，也許我按下了它的難度。

狀態(tài)字節(jié)將始終從數(shù)字1和數(shù)字0開始。

 1x0010000 | 0x0111100 | 0x111111
    ^狀態(tài) ^data1 ^data2

對于留下7位以表達該字節(jié)中數(shù)據(jù)的數(shù)據(jù)字節(jié)。這使我們的整數(shù)范圍為0-127。

對于狀態(tài)字節(jié)，第一次描述狀態(tài)消息類型后的下一個3位，其余4位描述了頻道。分解我們的二進制表示：

 1x001x0000

這如何轉(zhuǎn)化為Webmidi和JavaScript

正如您之前從代碼示例中猜到的那樣，使用WebMidi API，我們很少必須直接處理這些二進制表示。當(dāng)我們在JavaScript中發(fā)送和接收這些消息時，我們只需使用這樣的數(shù)組：

 [144，63，127]

如果您正在使用現(xiàn)有的音樂硬件，那么對信息的結(jié)構(gòu)方式和為什么以它們的方式進行了更深入的了解是有幫助的。知道在第一個字節(jié)中接收144的意思是在第一個頻道中打開音符，并且128表示正在關(guān)閉音符，這是有幫助的。

但是，如果我們正在建立非音樂體驗并創(chuàng)建自己的硬件，則可以重新使用這些數(shù)字以表示您想要的任何東西！

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

可以通過WebMidi API訪問可以連接到計算機的任何具有MIDI功能的設(shè)備。能夠?qū)IDI數(shù)據(jù)發(fā)送到另一個具有MIDI功能的設(shè)備的設(shè)備通常稱為MIDI控制器。一個常見的例子是一個簡單的鋼琴風(fēng)格的鍵盤，例如Korg Nanokey2：

但是它們的外觀和相互作用方式可能會差異很大。當(dāng)然，按鈕很常見，但是您可能還會發(fā)現(xiàn)一些包含表盤或壓力敏感墊，例如Akai LPD8：

其他人則使用更抽象和有趣的互動方式，包括將運動或呼吸映射到MIDI信號。例如，該控制器（來自源音頻的Hothand）使用三個加速度計將手勢映射到MIDI消息：

一些控制器都可以發(fā)送和接收MIDI消息，從而使您與物理世界進行真正的雙向?qū)υ挕?Novation LaunchPad是一個典型的示例 - 可以按下按鈕發(fā)送消息，也可以收到消息以動態(tài)更改設(shè)備上的顏色：

我可以構(gòu)建自己的硬件嗎？

事實證明，它們并不難于建造，您可以在野外找到很多自制的MIDI控制器。他們可以急忙獲得更多的詳盡。有些可以是徹底的香蕉：

構(gòu)建自己的MIDI控制器將帶您在JavaScript世界之外，但是如果您熟悉或?qū)rduino平臺感興趣，仍然可以訪問它。 Adafruit的電路游樂場經(jīng)典賽是開始使用的絕佳設(shè)備，您可以找到啟動代碼閃爍到設(shè)備，并將其插入GitHub上的多方面MIDI控制器。

概括

Webmidi API是前端開發(fā)人員開始嘗試基本硬件和軟件交互的低速度進入方式。與其他一些硬件Web API（例如藍牙）相比，該實現(xiàn)相對簡單，并且MIDI標準有據(jù)可查。有很多現(xiàn)有的具有MIDI功能的設(shè)備可以進行實驗或構(gòu)建酷炫的東西，如果您真的想全力以赴并開始為您的項目構(gòu)建自己的自定義MIDI硬件，那么也可以做到這一點。

去那里做點什么！

以上是用WebMidi將腳趾浸入硬件的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！