あえて今、ブラウザ上でMIDIファイルを再生したい

あえて今、ブラウザ上でMIDIファイルを再生したい あえて今、ブラウザ上でMIDIファイル を再生したい DE-TEIU(@de_teiu_tkg) フロントエンド・PHPカンファレンス北海道2026 2026/06/06 1

あえて今、ブラウザ上でMIDIファイルを再生したい 自己紹介 名前 ： DE-TEIU（@de_teiu_tkg） 職業 ： 株式会社 LIC エンジニア(雑用) 趣味 ： クソアプリ開発、麻雀 サイト： Uselesscode 近況 ： このLTをやるにあたり、事前調査として 図書館で古いPC雑誌を読んだりした。 しかし雑誌が面白くて作業が進まなかっ た。 フロントエンド・PHPカンファレンス北海道2026 2026/06/06 2

• https://uselesscode.net/

あえて今、ブラウザ上でMIDIファイルを再生したい 背景 フロントエンド・PHPカンファレンス北海道2026 2026/06/06 3

あえて今、ブラウザ上でMIDIファイルを再生したい 200X年頃、こういう感じの個人サイトが結構ありました。(再現) フロントエンド・PHPカンファレンス北海道2026 2026/06/06 4

あえて今、ブラウザ上でMIDIファイルを再生したい 200X年頃、こういう感じの個人サイトが結構ありました。(再現) フロントエンド・PHPカンファレンス北海道2026 2026/06/06 5

あえて今、ブラウザ上でMIDIファイルを再生したい MIDIとは 音楽の「演奏データ」を記録したファイル。 「いつ」「どの音を」「どの強さで」鳴らすかを保持している、 楽譜みたいなもの。 ファイル自体に音源は持っていないので、軽量。10KBもない。 ということで、実際に再生される音は再生する端末に依存する。 カラオケの音源によく使われている。 90年代前半ぐらいから急速に広まったらしい。 フロントエンド・PHPカンファレンス北海道2026 2026/06/06 6

あえて今、ブラウザ上でMIDIファイルを再生したい 昔のブラウザでは、簡単にMIDIファイルから BGMが再生できた embed や bgsound (IEのみ)タグにMIDIファイルのパスを指定す る。これでWebページにMIDIプレイヤーが表示される。 embed タグも、もともとはNetscape Navigatorの独自規格。 他のブラウザもこのタグを使ったMIDI再生機能をサポートはし ていたが、HTML5が出てきたタイミングで消滅した(らしい)。 また、現代のブラウザでは、基本的に「ユーザーの許可なく」 音声や動画を自動再生できなくなっている フロントエンド・PHPカンファレンス北海道2026 2026/06/06 7

あえて今、ブラウザ上でMIDIファイルを再生したい でも皆さんもブラウザでMIDIファイル 再生したいですよね？？？？ フロントエンド・PHPカンファレンス北海道2026 2026/06/06 8

あえて今、ブラウザ上でMIDIファイルを再生したい MIDIファイルを用意しよう なんとClaudeで作れます。最近のAIは賢いですね。 フロントエンド・PHPカンファレンス北海道2026 2026/06/06 9

あえて今、ブラウザ上でMIDIファイルを再生したい できました。耳コピでやったそうです。 Claudeには耳がある！！！ フロントエンド・PHPカンファレンス北海道2026 2026/06/06 10

あえて今、ブラウザ上でMIDIファイルを再生したい ブラウザで音を鳴らそう Web Audio APIを使えばできそう。 が、よくわかりませんね。有識者の方がいましたら教えてください。 とりあえず、音の入出力が可能ってことだけ理解して先に進みます。 フロントエンド・PHPカンファレンス北海道2026 2026/06/06 11

• https://developer.mozilla.org/ja/docs/Web/API/Web_Audio_API

あえて今、ブラウザ上でMIDIファイルを再生したい いい感じのライブラリとか無いかな いくつかありましたが、今回はTone.jsを使用しました。 例）C4(中央のド、周波数は261.63Hz)の音を、8n(八分音符)で再生 する。 //create a synth and connect it to the main output (your speakers) const synth = new Tone.Synth().toDestination(); //play a middle 'C' for the duration of an 8th note synth.triggerAttackRelease("C4", "8n"); フロントエンド・PHPカンファレンス北海道2026 2026/06/06 12

• https://tonejs.github.io/

あえて今、ブラウザ上でMIDIファイルを再生したい Tone.jsでMIDIファイルも読める // MIDIファイルをバイナリデータとして取得 const response = await fetch(midiFileUrl); const arrayBuffer = await response.arrayBuffer(); const midi = new Midi(arrayBuffer); this._duration = midi.duration; // envelopeで音の立ち上がり〜減衰〜持続〜余韻を設定 this.synth = new Tone.PolySynth(Tone.Synth, { envelope: { attack: 0.02, decay: 0.1, sustain: 0.3, release: 0.8, }, }).toDestination(); // 以下省略 フロントエンド・PHPカンファレンス北海道2026 2026/06/06 13

あえて今、ブラウザ上でMIDIファイルを再生したい ということで作ったサンプルがこちら (UI:XP.cssを使用) フロントエンド・PHPカンファレンス北海道2026 2026/06/06 14

• https://midi-sample-frontend.vercel.app/
• https://botoxparty.github.io/XP.css/

あえて今、ブラウザ上でMIDIファイルを再生したい 現代のブラウザでもMIDIファイルを 再生できた！！ フロントエンド・PHPカンファレンス北海道2026 2026/06/06 15

あえて今、ブラウザ上でMIDIファイルを再生したい まとめ 昔のブラウザでは、MIDIを再生する機能がサポートされていた しかし、HTML5が出たあたりで、その仕様が無くなった Web Audio APIというAPIが存在するた 自力でそれを理解して実装するのは難しめなので、 Tone.js などの 現代のブラウザにも、 め、それを使えば可能 ライブラリを使おう ClaudeでMIDIファイルを作れる Claudeには耳がある フロントエンド・PHPカンファレンス北海道2026 2026/06/06 16

あえて今、ブラウザ上でMIDIファイルを再生したい 参考資料 技術の系統化調査報告 28 I/O(1990年10月号、1994年7月号) パーフェクトMIDIブック Web Audio API(MDN) The EMBED tag by Netscape (v2.0) フロントエンド・PHPカンファレンス北海道2026 2026/06/06 17

• https://sts.kahaku.go.jp/albums/abm.php?d=3254&f=abm00010834.pdf&n=114.pdf
• https://www.amazon.co.jp/パーフェクトMIDIブック-DTM-HANDBOOKS-リットーミュージック出版編集部/dp/4845603748
• https://developer.mozilla.org/ja/docs/Web/API/Web_Audio_API
• https://lists.w3.org/Archives/Public/www-talk/1995SepOct/0045.html