はじめに
当サイトのMIDIツール群（MIDI接続チェッカー、BPMタップテンポ、MIDIノート変換表）は、すべてブラウザだけで動いています。専用アプリのインストールもドライバも不要で、Chromeを開くだけでMIDI機器とブラウザが直接通信します。
これを実現しているのが Web MIDI API というブラウザの機能です。この記事では、「このサイトのツールはどういう仕組みで動いているのか」を、技術的な背景も含めて解説します。
Web MIDI APIとは
Web MIDI APIは、ブラウザのJavaScriptからMIDIデバイスにアクセスするための仕組みです。W3C（Webの標準化団体）が策定した標準規格で、以下のことができます。
- USBで接続されたMIDIデバイスの一覧を取得
- MIDIメッセージ（ノート、CC、クロック等）をリアルタイムで受信
- MIDIメッセージをデバイスに送信
つまり、ブラウザがDAWやMIDIモニターの代わりになれるということです。
対応ブラウザ（2026年5月時点）
| ブラウザ | 対応 | 備考 |
|---|---|---|
| Chrome | ✅ | 推奨。最も安定 |
| Edge | ✅ | ChromiumベースのためChromeと同等 |
| Opera | ✅ | Chromiumベース |
| Firefox | ❌ | 未対応 |
| Safari | ❌ | 未対応 |
当サイトのツールでは、非対応ブラウザでアクセスした場合にその旨のメッセージを表示しています。
各ツールの仕組み
MIDI接続チェッカー
このツールがやっていることはシンプルです。
navigator.requestMIDIAccess()でブラウザにMIDIアクセスを要求- 接続されているデバイスの一覧を取得して表示
- 各デバイスの
onmidimessageイベントをリッスン（監視） - 受信したMIDIメッセージを解析してログに表示
MIDIメッセージは3バイトのデータで、それぞれの意味は以下の通りです。
- ステータスバイト: メッセージの種類（NoteOn、NoteOff、CC等）とチャンネル
- データバイト 1: ノート番号またはCC番号
- データバイト 2: ベロシティまたはCC値
チェッカーはこの3バイトを解析して、「NoteOn CH1 C4 Vel:100」のように人間が読める形式で表示しています。
BPMタップテンポ
このツールはWeb MIDI APIを直接は使っていません。ブラウザのイベント（クリックやキー押下）のタイムスタンプからBPMを計算しています。
計算の原理はシンプルです。
- タップの間隔（ms）を計測
60000 ÷ 間隔(ms) = BPM- 直近4拍または8拍の平均を取って精度を上げる
ディレイタイム計算も同じ原理で、60000 ÷ BPM = 1/4のms値 を基準に各音符を算出しています。
MIDIノート変換表
これは純粋なデータテーブルで、APIは使っていません。0–127の各ノート番号に対して、以下の計算で音名と周波数を導出しています。
- 音名:
ノート番号 % 12で C, C#, D, D#, E, F, F#, G, G#, A, A#, B のいずれかに対応 - オクターブ:
Math.floor(ノート番号 / 12) - 1で算出 - 周波数:
440 × 2^((ノート番号 - 69) / 12)で算出（A4 = 440Hz基準）
MIDIチェッカーで解決した問題
開発中にいくつかの問題に遭遇しました。同様のツールを作りたい方の参考になれば。
クロックメッセージのフィルタリング
MIDIクロック（ステータスバイト 0xF8）は1拍あたり24回送信されます。BPM 120なら約1秒に48回です。これをそのままログに表示すると、ノートやCCの情報が埋もれて見えなくなります。
そこで、クロックメッセージをログから除外し、代わりにクロック間隔からBPMを計算して表示する方式にしました。
複数入力からのクロック問題
MIDI入力が複数ある環境（例: 4台の機材がすべてUSBでPCに繋がっている）では、各デバイスから同じBPMのクロックが届くため、クロックイベントが台数分の頻度で発生します。そのまま計算すると、実際のBPMの4倍などの値が表示されてしまいます。
解決策として、最初にクロックを受信したデバイスのIDを記録し、以降は同じデバイスからのクロックのみを計算に使うようにしました。クロックが2秒間途絶えると、ロックを解除して次のクロック送信元を受け付けます。
デバイスのホットプラグ
USBケーブルの抜き差しに対応するため、statechange イベントを監視しています。デバイスが接続・切断されると、リストがリアルタイムで更新されます。ページをリロードする必要はありません。
まとめ
当サイトのツールの仕組みを整理します。
| ツール | 使っている技術 |
|---|---|
| MIDI接続チェッカー | Web MIDI API（デバイス一覧 + メッセージ受信） |
| BPMタップテンポ | ブラウザのタイムスタンプ + 四則演算 |
| MIDIノート変換表 | 音楽理論の数式（周波数計算） |
Web MIDI APIのおかげで、「ブラウザを開くだけ」でMIDIデバイスと直接通信できる時代になりました。2026年5月時点ではChrome系のブラウザに限られますが、「ちょっと確認したい」ときにDAWを起動する必要がないのは大きなメリットです。