MIDI モニター

Web MIDIアプリケーション



Web MIDI APIの動作テスト

このページでは、訪問者のブラウザでWeb MIDI APIを利用できるかどうかを自動的にテストします。




更新情報

July.28,2026

rtpMIDIまとめ

rtpMIDIは、ネットワーク(Wi-Fiや有線LAN)を通じてコンピュータやiOSデバイス間でMIDI信号を送受信するための仮想MIDIドライバおよび規格です。 ワイアレスでWindowsとMac、iPadなどをワイヤレスで接続できます。 rtpMIDIの接続は、Windows PC、Mac、iPhone、Raspberry Piの4つのデバイスで動作を確認しています。 このページでは、それぞれのデバイス間でrtpMIDI接続を行う方法を紹介します。

WindowsでrtpMIDIを利用するには、rtpMIDIアプリケーションをインストールする必要があります。 インストール方法や基本的な使い方については、こちらのページをご覧ください。

rtpMIDIは、Windows 11 Pro 25H2でも動作を確認しました。

loopMIDIでつなぐ

loopMIDIは、PC内に仮想MIDIケーブル(Virtual MIDI Cable)を作成するソフトウェアです。 PC上で動作するアプリケーション同士をMIDIで接続できるため、 例えば自作のアプリケーションからソフトウェアシンセサイザーを演奏できます。 プログラムからは、PCに接続された外部MIDI機器(音源モジュールなど)も、 PC内のソフトウェアシンセサイザーも同じように扱えるため、接続先を意識することなくMIDIアプリケーションを開発できます。 Windows 11 PRO 25H2 でも使えました。 今日現在、loopMIDISetup_1_0_16_27.zipがダウンロードできました。

ペクトラムアナライザ(Spectrum Analyzer)

Web Audio APIを使ったスペクトラムアナライザ(スペアナ)です。 パソコンやスマートフォンの音をFFTで周波数分析し、 音の高さと強さをグラフで表示します。iPhoneにも対応しています。

Multi Youtube Viewer

ulti Youtube Viewerアプリは8個のYoutube画像を、PCのキーボードや、 MIDIキーボードで切り替えて表示するアプリです。 Multi Youtube Viewerアプリはアプリケーションボタンからアクセスできます。





Loadボタンが効いていなかったので修正しました。

キーボードの"X"で、8画面表示となります。 もう一度"X"を押すと元の1画面表示に戻ります。



時間の長さの単位Tick

Tick(ティック)はシーケンサーなどで使われる時間の長さの単位です。4分音符の長さを480Tickと定義することが多いようです。 昔のシーケンサーではPCの時間精度が良くなかったので48あるいは96という数字でした。


Scratch MIDIの使い方

Scratch 3.0 は HTML5 と JavaScript で構成されています。 そのため、JavaScript で実装された機能を Scratch の拡張機能として追加できます。 Web MIDI API は JavaScript から利用できるため、Scratch の拡張機能として実装することで、 Scratch から MIDI 機器を操作できるようになります。


ピッチベンドの受信について追記しました。2026.06.25
ハットブロックについて追記しました。2026.06.26
レポーターブロックについて追記しました。2026.06.29
メッセージブロックについて記載しました。2026.06.30
ブーリアンブロックについて追記しました。2026.07.02

Bluetooth MIDIまとめ

  • nodeでBluetooth MIDI

    nodeのモジュールnoble/blenoを使って、Bluetooth MIDI でiPhoneとPCを接続する実験です。 Windows 10の時代の記事です。Windows 10ではBluetoothが一般的でなく苦労した覚えがあります。

  • Bluetooth MIDIでiPhoneとMACをつなぐ

    iPhoneもMACもBluetooth MIDIをサポートしています。Bluetooth すなわち無線で、 iPhoneの音源アプリをMACから鳴らしたり、iPhoneをコントローラとしてMACの音源を鳴らすことができます。 一番基本的な使い方かもしれません。

  • ArduinoとMACをBluetooth MIDIでつなぐ

    RedBearLab.comのBluetooth 4.0 Low Energy BLEシールド v2.1というArduino用のボードを持っています。 8年程前に買ったモノと思われます。このボードを使って、ArduinoとMACをBluetooth MIDIでつないで見たいと思います。 特殊なBluetooth 4.0のシールドを使った記事です。

  • ArduinoとWindows 11をBluetooth MIDIでつなぐ

    RedBearLab.comのBluetooth 4.0 Low Energy BLEシールド v2.1 をArduinoと接続し、 Bluetoorh MIDI機器として動作させます。これをWindows 11 から認識させます。 こちらもいずれESP32 BLE MIDIで作りなおしたいと思います。 2026.6.15 Windows 11 25H2ではBLIDInoが接続できていません。 Bluetoothの「デバイスを追加する」の画面で、 接続しようとするとエラーになります。 ESP32 BLE MIDI(デバイス名はBasic MIDI Device)は 「デバイスを追加する」の画面で、デバイスが見えません。原因はわかりません。

  • Bluetooth MIDIと5pin DIN MIDIの変換器

    Bluetooth MIDIと普通の5pin DIN MIDIの変換器を作ります。 ArduinoはBluetooth MIDIを受信し、 SerialポートからMIDIを5pin DINに出力します。 また、5pin DINから受け取ったMIDIはArdhinoのSerialポートで受け取り、 Bluetooth MIDIに変換します。 こちらの記事も、Bluetooth 4.0 Low Energy BLEシールド v2.1を使っています。 そのうち、ESP32 BLE MIDIで作りなおしたいと思います。

  • Bluetooth MIDIでSystem Exclusive

    MacがBluetooh MIDIでSystem Exclusiveを送信する際、どのようなフォーマットで送信するかを確認します。 Arduino のプログラムは以下の通りです。Bluetoothを受け取って、シリアルに書き出しています。 System ExclusiveをBluetooh MIDIで送信するアルゴリズムを紹介しています。 2026.6.15 追記・修正しました

ESP32 BLE MIDIをインストールする

ESP32-S3はBluetoothに対応してみます。ライブラリを見てみるとそのものずばりのESP32 BLE MIDIがありましたのでインストールしました。

SP32-BLE-MIDIをいくつか修正しました。修正点は以下の通りです。リポジトリを https://github.com/mikatahara/MH-ESP32-BLE-MIDIにおきました。

  • 引数を3つ取る、void pitchBend();関数が2つあったので1つの名前を変えました。
  • void pitchBendTones(uint8_t channel, float semitones, float range = 4); 関数の中で、PitchBendの最大値を0x3FFFにリミットしました。
  • System Exclusiveを送信する関数、 void sendSysEx(uint8_t *sysex, uint16_t sizeofsysex); を追加しました。
  • sendMMCを修正してメッセージを送信できるようにしました。

ZIPファイルをダウンロードし、Arduino/librarysに展開、元々のESP32-BLE-MIDIをフォルダごと削除します。



MacでBluetooth MIDIデバイスを認識

ESP32-BLE-MIDIをインスチールしたデバイスは、MacのMIDI設定から”Basic MIDI Device"として見えます。

System Exclusiveの送信

ESP32-BLE-MIDIにSystem Exclusiveメッセージを送信する関数をBLEMidiServerに追加しました。

MIDIマシンコントロール

ESP32 BLE MIDIには、MIDI Machine Control(MMC)のメッセージを送信するためのAPIが 付属しています。(対応している製品があれば…ですが。)

Arduino ESP32-S3の使い方

Arduino ESP32-S3はUSB MIDIに対応しています。 ESP32-S3はTinyUSBというライブラリを使って、USB MIDIに対応しています。 加えてUSB-MIDIをインストールすることでMIDIデバイスとしてPCとメッセージをやりとりすることができます。



MIDI 2.0



このページについて

こちらのページにお越しいただき、ありがとうございます。このサイトは以前、「Web MIDI API実験室」という名前で公開していました。しかし、Web MIDI API以外のコンテンツも増えてきたため、サイト名を変更しました。

現在もMIDIを切り口として、さまざまな技術に挑戦することをテーマにしています。PCやMac、Arduino、Raspberry Piなどのシングルボードコンピュータを使ったMIDI機器との接続方法や、WebブラウザでのAudio機能の活用方法などを紹介しています。また、自作したMIDI・Audio関連のWebアプリケーションも公開しています。

なお、電子回路の設計は専門ではありません。そのため、掲載している回路や製作例には、必ずしも最適とはいえないものが含まれている可能性があります。内容をご利用いただく際は、ご自身の判断と責任のもとでお願いいたします。

MIDIについて

MIDIはMusical Instrument Digital Interfaceの略称です。直訳すれば、楽器のデジタルインターフェースということになります。MIDIの誕生は1983年、任天堂「ファミリーコンピュータ」と同じ年です。この年の暮れには、シンセサイザDX7が発売になっています。Windows 95のはるか以前のことです。

もの凄くざっくりと書くならば、MIDIは電子楽器と電子楽器をつなぐデータの形(フォーマット)と通信経路の規格です。2つの楽器をMIDIで接続すると、一方の楽器を弾くと、もう一方の楽器が鳴ります。ちょっと前のコンサートでは舞台のちょっと奥にシンセサイザーを10台近く周りに並べて演奏するキーボーディストを見ることができました。大概の場合、キーボーディストはすべてのキーボードの鍵盤を弾くわけではありません。いずれかのキーボードがメインのキーボードになっていて、その他のキーボードはMIDIで接続されています。メインのキーボードを弾くとその他のキーボードの音が鳴るように設定されています。曲に合わせて、いろいろなキーボードの音色を使いたいということです。

その後MIDIはコンピュータのインターフェースとして取り込まれ、コンピュータから楽器を鳴らすことが一般的になりました。また、カラオケのデータとしても利用されるようになります。今日現在でも多くのポピュラー音楽の制作現場ではMIDIが使われています。MIDIの歴史は、2019年国立科学博物館の「かはく技術史大系(技術の系統化調査報告書)」I. 映像・情報・コンピュータ関連の一つとして調査された、「MIDI に関する技術系統化調査」井土秀樹著の中で詳しく書かれています。

さて、MIDIは楽器と楽器、コンピュータと楽器をつなぐインターフェースなのですが、私は楽器や音楽に関係無く使ってもとっても便利なインターフェースだと思っています。 コンピュータはPCでもMACでも、MIDIは簡単に扱えるようなドライバーやアプリケーションを持っています。また、iPhoneでもAndroidでもMIDIは扱えますし、ArdinoやRaspberry PiといったシングルボードコンピュータでもMIDIを扱うことができます。ですので、便利に何かと何かをつないでデータをやり取りするインターフェースとしてMIDIが使えるのでは無いかと思っています。

ここ数年では、MIDIやAudioを扱うWeb API(Web MIDI API, Web Audio API)が策定され、わりと簡単にウェッブアプリケーションを作成することができるようになりました。ウェッブアプリケーションはEdgeやChromeといったブラウザで動作します。アプリケーションをインストールしなくて使ええるのは良いですね。

このページでは、MIDIをつなぐ、つなぎ方を紹介するとともに、Web APIを使って製作したMIDI, オーディオのアプリケーションを紹介したいと思います。

2020年9月19日 MikataHara