Web API見本市
デバイス連携権限プロンプトあり判定中...

Web MIDI API

USB/BluetoothのMIDIキーボードや音源をブラウザから直接扱えるAPI。入出力デバイスの列挙とMIDIメッセージの送受信ができる。

MDNのドキュメントを見る

1対応判定

ブラウザ対応バージョン
Chrome43+
Firefox108+
Safari未対応

備考: 権限プロンプトあり（sysex）

2権限フロー

  1. 権限不要

    API呼び出しだけで動く。プロンプトも操作起点の縛りもない

  2. ユーザージェスチャー必須

    ボタンクリック等のユーザー操作の中でしか呼べない。プロンプトは出ない

  3. 権限プロンプトありこのAPI

    呼び出すとブラウザが許可/ブロックのプロンプトを表示し、ユーザーが選ぶ

  4. iOS独自requestPermission

    iOSではrequestPermission()を操作起点で呼び、明示的に許可を得る

requestMIDIAccess() 呼び出し時に権限プロンプトが表示される（sysex要求時は特に明示的な許可が必要）。

現在の権限状態（navigator.permissions.query）: このブラウザでは取得できません

3ライブデモ: MIDIキーボードの入力を可視化

4コードスニペット

TypeScript（要約版）
// MIDIアクセスを要求（ここで権限プロンプトが出る）
const access = await navigator.requestMIDIAccess({ sysex: false });

// 入力デバイスを列挙してハンドラを張る
for (const input of access.inputs.values()) {
  console.log(input.manufacturer, input.name);
  input.onmidimessage = (e) => {
    const [status, note, velocity] = e.data!;
    const command = status & 0xf0;
    if (command === 0x90 && velocity > 0) {
      // Note On: note番号 (60 = 中央のC)
      noteOn(note, velocity);
    } else if (command === 0x80 || (command === 0x90 && velocity === 0)) {
      noteOff(note);
    }
  };
}

// デバイスの抜き差しも監視できる
access.onstatechange = (e) => {
  console.log(e.port?.name, e.port?.state);
};

// 後始末: ページ離脱時にハンドラを外す
for (const input of access.inputs.values()) {
  input.onmidimessage = null;
}