このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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 ポートに送信するメッセージをキューに追加します。メッセージはすぐに送信することも、指定の遅延の後で送信することもできます。
MIDIMessageEventMIDIInput.midimessage_eventに渡されるイベントです。MIDIConnectionEventポートが利用可能になったり利用不可能になったりした時、
MIDIAccess.statechange_eventおよびMIDIPort.statechange_eventイベントに渡されるイベントです。
セキュリティの要件
この API へのアクセスは、navigator.requestMIDIAccess() メソッドを用いて要求します。
- このメソッドは保護されたコンテキストで呼び出す必要があります。
- アクセスは
midiHTTPPermission Policy により制限される可能性があります。 - ユーザーがユーザーエージェント固有のメカニズムによりこの API を用いる許可を明示的に与えるか、既に許可が与えられている必要があります。なお、アクセスが Permission Policy により拒否された場合は、ユーザーがアクセスを許可することはできません。
許可の状態は、Permissions API のメソッドnavigator.permissions.query() に権限midi と (省略可能な)sysex プロパティを設定した権限ディスクリプターを渡すことで取得できます。
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 デバイスにアクセスできます。このメソッドは、保護されたコンテキストで呼ばれる必要があります。
let midi = null; // グローバルの MIDIAccess オブジェクトfunction onMIDISuccess(midiAccess) { console.log("MIDI の準備ができました！"); midi = midiAccess; // グローバル変数に保存する (実際の使用法では、オブジェクトインスタンスに格納するのがよいでしょう)}function onMIDIFailure(msg) { console.error(`MIDI アクセスの取得に失敗しました - ${msg}`);}navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);入力と出力を列挙する
この例では、入力ポートと出力ポートのリストを取得し、コンソールに出力します。
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 メッセージをコンソールに出力します。
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 |