用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中文網其他相關文章！