ステータス: MIDI未接続
The organ for PC - Key/Mouse, and MIDI-Keyboard!| Type | |
|---|---|
| Level |
SingleFileOrgan_key,mouse.htmlをChatGPTに外部MIDIキーボード対応に拡張させてみた。(2024.11.18) Me:「次のHTMLコードをMIDI WebAPIを使って外部MIDIキーボードでも弾けるように拡張してください。ただしタッチセンス(打鍵の強さによる音量調整)は不要です。 また、追加したコードに機能的な意味をコメントで書き添えてください。」 ChatGPT:「以下(上に移動)の(Javascript)コードを追加して、MIDI Web APIを用いて外部MIDIキーボードからも音を鳴らせるように拡張しました。コメントを加えて機能を説明しています。」 変更点・説明 1. MIDIデバイスの初期化 • navigator.requestMIDIAccess() を呼び出し、MIDIデバイスへのアクセスを取得します。デバイスが見つかった場合、その入力イベントを監視します。 2. MIDIメッセージの処理 • MIDIメッセージからノートオン/オフを検出します。 • ノートオン (status === 144 && velocity > 0) の場合、キーを周波数に変換し、音を鳴らします。 • ノートオフ (status === 128 またはベロシティが0) の場合、音を停止します。 3. MIDIノート番号を周波数に変換 • MIDIノート番号 (0~127) を基準とし、標準のA4 (440Hz) から計算して周波数を求めます。 このコードを追加すると、MIDIキーボードで鍵盤を弾いた際に音を鳴らすことができるようになります。タッチセンス(ベロシティ)には対応していませんが、必要であればベロシティを音量レベルに反映させる拡張も可能です。
iOSで外部MIDIキーボードを使うための修正ポイント (本HTML Body内冒頭に追加されたコード) * ユーザー起動型(User Gesture)にする: ページ読み込み時に自動でMIDIを要求するのではなく、ボタンをクリックした時に navigator.requestMIDIAccess() を実行するようにします。 * HTTPS環境: Web MIDIはセキュアコンテキスト(HTTPS)でのみ動作します。 iOS上のChromeは、Safariと同じ「WebKit」というエンジンを使っていますが、Appleのセキュリティ制限により、Safari(OS標準ブラウザ)以外のブラウザアプリにはMIDIデバイスなどのハードウェアへの直接アクセス権限が与えられていません。 iOSで動作させるためのチェックリスト * ブラウザ: 必ず Safari を使用してください(ChromeやEdgeでは動きません)。 * ボタンの設置: navigator.requestMIDIAccess() を呼び出すためのボタンを設置し、ユーザーが手動で押すようにします。 * 接続確認: MIDIキーボードを接続した状態でページをリロードし、ボタンを押してください。 設定の確認: iOSの「設定」>「Safari」>「詳細」>「Feature Flags(または実験的な機能)」の中で「Web MIDI API」が有効になっていることを確認してください(最新のiOSではデフォルトで有効なはずです)。