---
title: あえて今、ブラウザ上でMIDIファイルを再生したい
tags: 
author: [DE TEIU (DE-TEIU)](https://www.docswell.com/user/8895128)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/KJ4WGX3Y71.jpg?width=480
description: フロントエンド・PHPカンファレンス北海道2026 登壇資料です。
published: June 06, 26
canonical: https://www.docswell.com/s/8895128/5E1867-2026-06-06-171446
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/KJ4WGX3Y71.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/LE1YDN1N7G.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/GEWGY49MJ2.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/47ZLX29MJ3.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/YJ6W4VK5JV.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/GJ5MQDPGJ4.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/9E29P86D7R.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/D7Y4569MEM.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/VENYNZL3J8.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/Y79PRZ4PE3.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/G78DW1QX7D.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/L7LMNQXNJR.jpg)

あえて今、ブラウザ上で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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/4EMYX1LQEW.jpg)

あえて今、ブラウザ上で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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/PER9NLKKJ9.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/P7XQNWL5EX.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/37K9NVLR7D.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/LJ3WVM3GJ5.jpg)

あえて今、ブラウザ上で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