Webに先行する成熟したプロトコルを使用して、興味深いカスタム構(gòu)築のハードウェアとインターフェイスできるようにする、サポートされているブラウザAPIがあることをご存知ですか？ MIDIとWebMidi APIを紹介し、JavaScriptとDOMの相対的な快適さを殘さずに、ハードウェアプログラミングの世界でブラウザの外に出て手を出すためのフロントエンド開発者がどのようにユニークな機會を提供するかを示しましょう。

MidiとWebmidiと正確には何ですか？

Midiは、楽器が互いに通信するために設計されたニッチなプロトコルです。 1983年に標準化され、今日まで音楽業(yè)界企業(yè)や代表者で構(gòu)成される組織によって維持されています。ある意味では、W3CがWeb標準を指示および保存する方法とは大きく異なりません。

WebMidi APIは、このプロトコルのブラウザベースの実裝であり、WebアプリケーションがMIDIを「発言」し、ユーザーのデバイスに接続される可能性のあるMIDI対応ハードウェアと通信できるようにします。

ミュージシャンではありませんか？心配しないで！電子楽器向けに設計されたこのシンプルなプロトコルを使用して、楽しく、インタラクティブで完全に非音楽的なものを構(gòu)築するために使用できることを非常に迅速に発見します。

なぜこれをやりたいのですか？

素晴らしい質(zhì)問。最短の答え：楽しいから！

その答えがあなたのために十分に満足していない場合、私はこれを提供します：物理的な世界と仮想世界の間の境界線にまたがるものを作成することは、私たちがほとんどの日々を費やして物事を構(gòu)築することは、異なる考え方の良い運動です。それは、創(chuàng)造的ないじくり回し、新しいユーザーインターフェイスとナビゲートするエクスペリエンスを検討し、作成する機會です。この種の遊び心のある探索は、脳のさまざまな部分を使用し、長距離の開発者をより良くするのに役立つと本當に思います。

どんなものを構(gòu)築できますか？

何を始める必要がありますか？

Webmidiの実験を開始するための前提條件は次のとおりです。

MIDIコントローラー

これは最も難しい部分かもしれません。実験するために、MIDI対応のハードウェアを調(diào)達する必要があります。 Craigslist、Amazon、またはAliexpressで安いものを見つけることができるかもしれません。または、あなたが本當に野心的で、Arduinoを利用できる場合は、獨自のものを作成できます（この記事の最後を參照してください。

Webmidi対応ブラウザ

このブラウザサポートデータはCaniuseからのもので、詳細があります。數(shù)字は、ブラウザがそのバージョン以降の機能をサポートしていることを示しています。

デスクトップ

モバイル /タブレット

この記事の執(zhí)筆時點では、Caniuse.comによると、ブラウザの約73％がサポートされていますが、大部分はChromiumによって行われています。 Chromiumベースのブラウザは、電子アプリと新しいクロムベースのMicrosoft Edgeを含むWebmidiをサポートします。また、OperaとSamsung Internet Browserでサポートされています。 Firefoxでは、まだ議論されていますが、うまくいけば早く來ることを願っています。

こんにちは、webmidi

これらの両方を調(diào)達したら、コードを書き始めることができます！ Webmidiを使用することは、GeolocationやMediadevices APIなど、他のブラウザAPIを使用して作業(yè)することとは、どちらかに精通している場合は、それほど違いはありません。

高レベルのフローは次のようになります：

• ブラウザでWebMidi APIの可用性を検出します。
• 検出された場合、ユーザーにアクセスする許可を要求します。
• 許可が與えられたら、接続されたMIDIデバイスを検出および通信するための追加の方法にアクセスできるようになりました。

それが行動中に見て??みましょう：

 if（ "navigatorのrequestmidiaccess"）{
  // Web Midi APIをご利用いただけます！
}

さて、私たちがWebmidi対応のブラウザにいると仮定すると、アクセスを要求しましょう。

 navigator.requestmidiaccess（）
.then（（アクセス）=＆gt; {
  //ユーザーは許可を與えてくれました。今、私たちはできます
  //接続されているMIDI対応デバイスにアクセスします
  //ユーザーのマシンに。
}）
.catch（（error）=＆gt; {
  //許可は認められませんでした。 :(
}）;

ユーザーが許可を與えてくれる場合、Midiaccessインターフェイスにアクセスできるようになりました。これにより、MIDI入力を受け取ってMIDI出力を送信できるデバイスのリストを作成できます。

次にそれをしましょう。これは、以前のコードスニペットから渡された関數(shù)の內(nèi)部にあるコードです。

 const inputs = access.inputs;
const outputs = access.outputs;

//接続された各MIDI入力デバイスを繰り返します
inputs.foreach（（midiinput）=＆gt; {
  // MIDI入力デバイスで何かをします
}）;

//接続された各MIDI出力デバイスを繰り返します
outputs.foreach（（midioutput）=＆gt; {
  // MIDI出力デバイスで何かをします 
}）;

MIDI入力デバイスと出力デバイスの違いは何なのか疑問に思うかもしれません。一部のデバイスは、MIDI情報のみをコンピューターに送信するようにセットアップされ（これらは入力としてリストされます）、他のデバイスはコンピューターから情報を受信できます（これらは出力として表示されます）。デバイスを送信して受信できることは珍しいことではないので、両方にリストされていることがわかります。

接続されたすべてのMIDIデバイスを介して反復できるコードができたので、基本的に私たちがやりたいことは2つしかありません。

• 入力デバイスの場合は、それから発している入っているMIDIメッセージを聞きたいと思います。
• 出力デバイスの場合は、MIDIメッセージを送信する必要があります。

イベントリスナーをセットアップするためのコードは、入力デバイスからの著信MIDIメッセージに応答するコードは、他のDOMイベントにセットアップできるイベントリスナーに非常に似ています。ただし、この場合、私たちが聞いているイベントはMidimessageイベントです。

 midiinput.addeventlistener（ 'midimessage'、（event）=＆gt; {
  //「イベント」オブジェクトには「データ」プロパティがあります
  // 3つの番號の配列が含まれています。例として：
  // [144、63、127]
}）

出力デバイスにMIDIメッセージを送信したい場合は、このようにできるコード。

 outputsend（[144、63、127]）;

これがCodepenデモです。これのほとんどがあなたのためにまとめられています。システムに接続されているすべてのMIDI入力および出力デバイスについてお知らせし、MIDIメッセージが発生していることを示します。

ペンを參照してください
George Mandis（@Georgemandis）によるWebmidi基本テスト
Codepenで。

あなたはこの時點でいくつかのことを疑問に思うかもしれません：

• Midimessageイベントを聞いているとき、event.dataでその3つの數(shù)字配列の頭または尾を作るにはどうすればよいですか？
• MIDI出力デバイスに3つの番號の配列を送信したのはなぜですか？特定の番號を送信したのはなぜですか？

これらの質(zhì)問の両方に対する答えは、MIDIプロトコルがどのように機能するか、そしてそれが解決するように設計された問題をさらに探求し、理解することにあります。

MIDIメッセージの解剖學

MIDIコントローラーが別のMIDI対応デバイスまたはコンピューターに「話す」とき、彼らは互いにMIDIメッセージを送信および受信しています。この通信の根底にあるプロトコルは、実際にはかなり単純ですが、説明すると少し冗長です。それでも、私はやってみます。

すべてのMIDIメッセージは、8ビット（0-255）で構(gòu)成される3つのバイトで構(gòu)成されています。バイナリで表されると、メッセージは次のようになります。

 10010000 | 00111100 | 01111111

MIDIメッセージには、ステータスとデータの2種類のみがあります。すべてのメッセージは、1つのステータスバイトと2つのデータバイトで構(gòu)成されます。

ステータスバイトは、次のようなものを含む、どのようなメッセージが配信されているかを伝えることを目的としています。

• オンに注意してください
• ノートオフ
• ピッチベンドの変更
• 制御/モードの変更
• プログラムの変更

…そして他の多く。

あなたが非音楽的な背景からこれに來ているなら、これらのステータスメッセージはちょっと奇妙に思えるかもしれませんが、それについてあまり心配しないでください。データバイトは、ステータスのより多くの情報とコンテキストを提供することを目的としています。たとえば、Midiピアノをマシンに接続してメモを再生するキーを押すと、どのメモをプレイしたか、おそらくそれを押すのが難しいかを示すデータバイトを伴う「メモ」ステータスバイトを送信します。

ステータスバイトは、常に番號1とデータバイトで開始されます。

 1x0010000 | 0x0111100 | 0x1111111
    ^status ^data1 ^data2

7ビットを離れるデータバイトの場合、そのバイトでデータを表現(xiàn)します。これにより、0?127の整數(shù)範囲が得られます。

ステータスバイトの場合、最初の3ビットの後の次の3ビットは、殘りの4ビットがチャネルを記述している間、ステータスメッセージのタイプを説明します。バイナリ表現(xiàn)を分解するには：

 1x001x0000

これがWebmidiとJavaScriptにどのように変換されるか

以前のコードサンプルから推測したように、Webmidi APIを使用して、これらのバイナリ表現(xiàn)に直接対処する必要はめったにありません。 JavaScriptでこれらのメッセージを送信して受信するとき、次のような配列を使用するだけです。

 [144、63、127]

既存の音楽ハードウェアを使用している場合は、メッセージがどのように、なぜ構(gòu)造化されているかをより深く理解することが役立ちます。最初のバイトで144を受け取ることは、最初のチャネルでメモがオンになっていることを意味し、128がメモがオフになっていることを示すことを意味することを知っておくと役立ちます。

ただし、音楽以外のエクスペリエンスを構(gòu)築し、獨自のハードウェアを作成する場合、これらの數(shù)値は、必要なものを表すために再利用できます。

どんなハードウェアを使用できますか？

コンピューターに接続できるMIDI対応デバイスは、WebMidi APIを介してアクセスできるはずです。 MIDIデータを別のMIDI対応デバイスに送信できるデバイスは、MIDIコントローラーと呼ばれることがよくあります。一般的な例は、このkorg nanokey2のようなシンプルでピアノスタイルのキーボードです。

しかし、それらは外観と相互作用のモードが大きく異なる場合があります。ボタンは確かに一般的ですが、アカイLPD8のようなダイヤルまたは圧力に敏感なパッドを組み込んだものを見つけるかもしれません：

他の人は、MIDI信號への動きのマッピングや呼吸など、より抽象的で興味深い相互作用モードを使用します。たとえば、このコントローラー（ソースオーディオのHothand）は3つの加速度計を使用して、Hand GestureをMIDIメッセージにマッピングします。

一部のコントローラーは、MIDIメッセージを送信および受信できるため、物理的な世界と真の雙方向の會話をすることができます。 Novation LaunchPadは古典的な例です。ボタンを押してメッセージを送信することができ、メッセージを受信して??デバイスの色を動的に変更することもできます。

獨自のハードウェアを構(gòu)築できますか？

構(gòu)築するのはそれほど難しくないことがわかり、野生で多くの自家製のMIDIコントローラーを見つけることができます。彼らは急いではるかに精巧になることができます。いくつかは実にバナナかもしれません：

獨自のMIDIコントローラーを構(gòu)築すると、JavaScriptの世界の外に少し外れますが、Arduinoプラットフォームに精通している、または興味を持っている場合は、驚くほどアクセスできます。 AdafruitのCircuit Playground Classicは、始められるのに最適なデバイスであり、デバイスにフラッシュするスターターコードを見つけることができ、GitHubのマルチフェセットのMIDIコントローラーになります。

まとめ

WebMidi APIは、フロントエンド開発者が基本的なハードウェアとソフトウェアの相互作用の実験を開始するための低バリアから入力の低い方法です。実裝は、他のハードウェアWeb API（Bluetoothなど）と比較して比較的簡単であり、MIDI標準は十分に文書化されています。既存のMIDI対応のデバイスがたくさんあります。クールなものを?qū)g験または構(gòu)築するために、本當にすべてを行ってプロジェクトのために獨自のカスタムMIDIハードウェアの構(gòu)築を開始したい場合は、それもできます。

そこに行って何かを作りましょう！

以上がWebmidiでつま先をハードウェアに浸しますの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。