このメソッドは保護されたコンテキストで呼び出す必要があります。
アクセスは 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;
  });
}

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025年12月3日 by MDN contributors.

View this page on GitHub • Report a problem with this content

Web MIDI API

In this article

インターフェイス

セキュリティの要件

例

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

入力と出力を列挙する

MIDI 入力を扱う

仕様書

ブラウザーの互換性

api.Navigator.requestMIDIAccess

http.headers.Permissions-Policy.midi

api.Permissions.permission_midi

関連情報

Help improve MDN