このページでは、訪問者のブラウザでWeb MIDI APIを利用できるかどうかをテストします。
Chrome、EdgeあるいはFireFoxなどブラウザでこのページを開いて下さい。 MIDIキーボードをPCに接続します。 私の場合はKorg nanoKEY2というMIDIキーボードを持っていますので、これをPCのUSB端子に接続します。 キーボードを接続した後、このページをリロードします。

ページをリロードすると、次のように「MIDIデバイスの操作と再プログラム」の許可を求めるダイアログが表示します。 この状態だと、下のボックスにテスト中と赤文字で表示されると思います。 「許可」するをクリックしてください。

このページを開いて、ちょっと待ってから下の枠内にWeb MIDI API ready!の表示がされていれば、Web MIDI APIが使えます。 Web MIDI API faileの場合は使えません。readyの場合は、入力デバイスの数と名前、出力デバイスの数と名前が表示されます。
テスト中
たまに、MIDI キーボードを接続していて、Web MIDI API ready!と表示されているにもかかわらず、input_device=0, output_device=0 と表示されることがあります。この場合には、 1)MIDIキーボードを抜く、2)MIDIキーボードを挿す、3)このページをリロードする、の手順を試してみて下さい。
ブラウザのURL入力ボックスの右端に、鍵盤マークがあります。このマークに斜め線が付いている時はWeb MIDI APIが 使えません。

この場合は、鍵盤マークをクリックしてください。以下のようなダイアログが表示されます。 下のように、許可する、という側のチェックボックスにチェックを入れて下さい。

鍵盤マークの斜め線が消えて、Web MIDI APIが使えるようになります。

上の入力と書かれたプルダウンメニューは、PCに接続されているMIDI入力機器のうち、 どの機器をモニターするかを選択するプルダウンメニューです。 1つの機器のみ接続されている場合は、その機器の名前が表示されていると思います。 私の場合はnanoKEY2 と表示されています。もし、機器を接続しているにも関わらず、メニューが表示されない場合には、 このページをリロードしてみてください。

さて、今度は鍵盤を押してみます。一番左の鍵盤を押して離してみると、
data.length=3: 0x90: 0x30: 0x57: data.length=3: 0x80: 0x30: 0x40:
などのように表示されるはずです。0x90は鍵盤を押した時に出る情報です。この情報をノートオンと言います。0xは16進数を示します。 0x90は10進数では144です。以下括弧の中に10進数での値を表記します。
0x30(=48)はどの鍵盤を押したか?の情報です。この情報をノート番号と言います。上の図にそれぞれの鍵盤でどのような数字が出るかを示しました。 0x57(=87)の所は鍵盤を押すときの速さを意味しています。(この情報をベロシティと言います。 押さえ方によって数字は異なります。そ~と鍵盤を押すと0x2D(=45) (もっとそ~と押すと、さらに小さい数字が出せるかもしれません。) という情報が、バンと強く押すと0x7F(=127)が出ました。この0x7F(=127)が最大値です。
次の段の0x80(=128)は鍵盤を離した、という情報です。この情報をノートオフと言います。0x30(=48)は離された鍵盤の番号、0x40は本来鍵盤をゆっくり離したのかそれとも 素早く離したのかを表す数字です。しかし、この鍵盤nanoKEY2 ではどんな離し方をしても同じ0x40(=64)となっていました。
この例では、0x30(=48)という鍵盤が0x57(=87)という強さで押されて、その後0x30(=48)の鍵盤が離された、ということになります。