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 with JavaScript enabled. Enable JavaScript to view data.

### http.headers.Permissions-Policy.midi

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### api.Permissions.permission\_midi

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* Introduction to Web MIDI
* Making Music in the Browser