Web MIDI API

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

Web MIDI API は、Musical Instrument Digital Interface (MIDI) デバイスに接続して操作します。

このインターフェイスは、MIDI メッセージの送受信の実用的な側面を扱います。 そのため、この API は音楽用途でも音楽意外の用途でも、コンピューターに接続された任意の MIDI デバイスを扱うことができます。

インターフェイス

MIDIInputMap

すべての利用可能な MIDI 入力ポートを表します。

MIDIOutputMap

すべての利用可能な MIDI 出力ポートを表します。

MIDIAccess

入力デバイスや出力デバイスを列挙したり、個々のデバイスにアクセスしたりするメソッドを提供します。

MIDIPort

個々の MIDI ポートを表します。

MIDIInput

入力ポートから受信する MIDI メッセージを扱うメソッドを提供します。

MIDIOutput

接続された MIDI ポートに送信するメッセージをキューに追加します。メッセージはすぐに送信することも、指定の遅延の後で送信することもできます。

MIDIMessageEvent

MIDIInput.midimessage_event に渡されるイベントです。

MIDIConnectionEvent

ポートが利用可能になったり利用不可能になったりした時、MIDIAccess.statechange_event および MIDIPort.statechange_event イベントに渡されるイベントです。

セキュリティの要件

この API へのアクセスは、navigator.requestMIDIAccess() メソッドを用いて要求します。

  • このメソッドは安全なコンテキストで呼び出す必要があります。
  • アクセスは midi HTTP Permission Policy により制限される可能性があります。
  • ユーザーがユーザーエージェント固有のメカニズムによりこの API を用いる許可を明示的に与えるか、既に許可が与えられている必要があります。 なお、アクセスが Permission Policy により拒否された場合は、ユーザーがアクセスを許可することはできません。

許可の状態は、Permissions API のメソッド navigator.permissions.query() に権限 midi と (省略可能な) sysex プロパティを設定した権限ディスクリプターを渡すことで取得できます。

js
navigator.permissions.query({ name: "midi", sysex: true }).then((result) => {
  if (result.state === "granted") {
    // アクセスが許可されました
  } else if (result.state === "prompt") {
    // API を使用すると、許可を求めるプロンプトが表示されます
  }
  // ユーザープロンプトまたは Permission Policy により権限が拒否されました
});

例

MIDI ポートにアクセスできるようにする

navigator.requestMIDIAccess() メソッドは MIDIAccess オブジェクトで解決する Promise を返します。このオブジェクトを利用して MIDI デバイスにアクセスできます。 このメソッドは、安全なコンテキストで呼ばれる必要があります。

js
let midi = null; // グローバルの MIDIAccess オブジェクト
function onMIDISuccess(midiAccess) {
  console.log("MIDI の準備ができました！");
  midi = midiAccess; // グローバル変数に保存する (実際の使用法では、オブジェクトインスタンスに格納するのがよいでしょう)
}

function onMIDIFailure(msg) {
  console.error(`MIDI アクセスの取得に失敗しました - ${msg}`);
}

navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);

入力と出力を列挙する

この例では、入力ポートと出力ポートのリストを取得し、コンソールに出力します。

js
function listInputsAndOutputs(midiAccess) {
  for (const entry of midiAccess.inputs) {
    const input = entry[1];
    console.log(
      `入力ポート [type:'${input.type}']` +
        ` id:'${input.id}'` +
        ` manufacturer:'${input.manufacturer}'` +
        ` name:'${input.name}'` +
        ` version:'${input.version}'`,
    );
  }

  for (const entry of midiAccess.outputs) {
    const output = entry[1];
    console.log(
      `出力ポート [type:'${output.type}'] id:'${output.id}' manufacturer:'${output.manufacturer}' name:'${output.name}' version:'${output.version}'`,
    );
  }
}

MIDI 入力を扱う

この例では、1 個のポートで受信した MIDI メッセージをコンソールに出力します。

js
function onMIDIMessage(event) {
  let str = `タイムスタンプ ${event.timeStamp} に受信した MIDI メッセージ [${event.data.length} バイト]: `;
  for (const character of event.data) {
    str += `0x${character.toString(16)} `;
  }
  console.log(str);
}

function startLoggingMIDIInput(midiAccess, indexOfPort) {
  midiAccess.inputs.forEach((entry) => {
    entry.onmidimessage = onMIDIMessage;
  });
}

仕様書

Specification
Web MIDI API

ブラウザーの互換性

api.Navigator.requestMIDIAccess

BCD tables only load in the browser

http.headers.Permissions-Policy.midi

BCD tables only load in the browser

api.Permissions.permission_midi

BCD tables only load in the browser

関連情報