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

MIDI和Webmidi到底是什麼？

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

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

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

我為什麼要這樣做？

很棒的問(wèn)題。最短的答案：因?yàn)楹苡腥ぃ?/p>

如果這個(gè)答案對(duì)您來(lái)說(shuō)不足以滿足，我會(huì)提供的：創(chuàng)建一些跨越物理世界和虛擬世界之間的界限，我們花費(fèi)大部分時(shí)間來(lái)建立事物，這是一種很好的練習(xí)。這是一個(gè)創(chuàng)造性修補(bǔ)以及考慮和創(chuàng)建新的用戶界面和經(jīng)驗(yàn)進(jìn)行導(dǎo)航的機(jī)會(huì)。我真的認(rèn)為，這種有趣的探索有助於我們使用大腦的不同部分，並使我們?cè)陂L(zhǎng)途旅行中更好地開(kāi)發(fā)人員。

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

我需要開(kāi)始什麼？

以下是開(kāi)始嘗試WebMidi的先決條件：

MIDI控制器

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

具有Webmidi的瀏覽器

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

桌面

移動(dòng) /平板電腦

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

您好，Webmidi

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

高級(jí)流程看起來(lái)像這樣：

• 我們?cè)跒g覽器中檢測(cè)到Webmidi API的可用性。
• 如果檢測(cè)到，我們請(qǐng)求用戶許可訪問(wèn)它。
• 一旦獲得許可，我們現(xiàn)在就可以訪問(wèn)其他方法來(lái)檢測(cè)並與任何連接的MIDI設(shè)備進(jìn)行通信。

讓我們看看這一點(diǎn)：

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

現(xiàn)在，假設(shè)我們?cè)诰哂蠾ebmidi的瀏覽器中，讓我們請(qǐng)求訪問(wèn)：

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

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

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

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

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

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

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

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

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

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

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

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

 outputsend（[144，63，127]）;

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

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

在這一點(diǎn)上，您可能想知道幾件事：

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

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

MIDI消息的解剖

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

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

 10010000 | 00111100 | 0111111

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

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

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

……還有許多其他。

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

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

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

對(duì)於留下7位以表達(dá)該字節(jié)中數(shù)據(jù)的數(shù)據(jù)字節(jié)。這使我們的整數(shù)範(fàn)圍為0-127。

對(duì)於狀態(tài)字節(jié)，第一次描述狀態(tài)消息類型後的下一個(gè)3位，其餘4位描述了頻道。分解我們的二進(jìn)製表示：

 1x001x0000

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

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

 [144，63，127]

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

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

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

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

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

其他人則使用更抽象和有趣的互動(dòng)方式，包括將運(yùn)動(dòng)或呼吸映射到MIDI信號(hào)。例如，該控制器（來(lái)自源音頻的Hothand）使用三個(gè)加速度計(jì)將手勢(shì)映射到MIDI消息：

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

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

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

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

概括

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

去那裡做點(diǎn)什麼！

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