Webmidiでつま先をハードウェアに浸します

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

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

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

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

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

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

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

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

どんなものを構築できますか？

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

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

MIDIコントローラー

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

Webmidi対応ブラウザ

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

デスクトップ

モバイル /タブレット

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

こんにちは、webmidi

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

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

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

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

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

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

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

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

次にそれをしましょう。これは、以前のコードスニペットから渡された関数の内部にあるコードです。

 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つの数字配列の頭または尾を作るにはどうすればよいですか？
• MIDI出力デバイスに3つの番号の配列を送信したのはなぜですか？特定の番号を送信したのはなぜですか？

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

MIDIメッセージの解剖学

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

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

 10010000 | 00111100 | 01111111

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

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

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

…そして他の多く。

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

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

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

7ビットを離れるデータバイトの場合、そのバイトでデータを表現します。これにより、0〜127の整数範囲が得られます。

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

 1x001x0000

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

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

 [144、63、127]

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

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

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

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

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

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

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

独自のハードウェアを構築できますか？

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

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

まとめ

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

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

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