[2026/9/13]

[WEB App] FluidSynth Web Player v1.0 — SoundFont / MIDI プレイヤー & Piano Roll ビジュアライザー

[WEB App] FluidSynth Web Player v1.0 — SoundFont / MIDI プレイヤー & Piano Roll ビジュアライザー

FluidSynth Web Player v1.0

WebAssembly（WASM）環境で動作する SoundFont レンダラー FluidSynth 2.4.6 とブラウザ標準の Web Audio API を組み合わせ、外部サーバーを一切介さずに .sf2 / .sf3 音源と MIDI (.mid) ファイルを完全レンダリング再生する Web アプリケーション。

自作の軽量 Standard MIDI File (SMF) パーサーによるノート解析をはじめ、Synthesia 風の Canvas2D ピアノロールビジュアライザー、AudioContext と同期するスムーズな Smooth Tick 補間描画、大容量 SoundFont の IndexedDB ローカルキャッシュ、および Reverb / Chorus などの DSP パラメータリアルタイム制御機能を統合しています。

スクリーンショット

メイン UI & ピアノロール

FluidSynth Web Player v1.0 — ピアノロール UI

動画（GIF）

FluidSynth Web Player v1.0 — 動作デモ

CREDIT

音源には S. Christian Collins 氏が制作・配布している SoundFont「GeneralUser GS」を使用しています。

特徴

  • ブラウザ完結型の WASM FluidSynth 音源エンジン:
    FluidSynth 2.4.6 を WebAssembly にコンパイルし、外部サーバーを使わずに .sf2 / .sf3 SoundFont と MIDI ファイルを高速レンダリング。
  • Synthesia 風 60fps Canvas2D ピアノロール:
    MIDI チャンネルごとに色分けされた落下ノートアニメーションと、発音時の鍵盤アクティブ発光エフェクト。
  • 高精度 Smooth Tick 補間アルゴリズム:
    AudioContext.currentTime と BPM 換算を組み合わせ、カクつきのないスムーズなノートスクロールを実現。
  • IndexedDB による大容量 SoundFont キャッシュ:
    数十MB級の General User SF2 等をブラウザに自動永続化し、2回目以降のアクセスで瞬時にロード。
  • リアルタイム Synth パラメータ制御:
    Master Gain、Polyphony、Interpolation（補間モード）、Reverb (Room Size, Damping, Level)、Chorus (Voices, Level, Speed) の即時調整。
  • 16ch 独立ミキサー & アクティブ音量表示:
    16 チャンネル各々のインストゥルメント名表示と、リアルタイムのレベルメーター。

モジュール構成

モジュール名主要機能・パラメータ
SOUNDFONT / MIDI DROP.sf2 / .sf3 SoundFont および .mid ファイルのドラッグ＆ドロップ読み込み、クリア機能
MIDI CHANNELS (1-16)全16チャンネルの楽器名表示、リアルタイム音量（レベル）メーター
PIANO ROLL VISUALIZERSynthesia 風 2D ピアノロール、チャンネル別カラー、ノート落下 & 鍵盤アクティブ点灯
SYNTH PARAMS (MASTER)Gain (0.01.0), Polyphony (1256), Interpolation (4th Order Sinc 等)
SYNTH PARAMS (REVERB)Enable トグル, Room Size, Damping, Level コントロール
SYNTH PARAMS (CHORUS)Enable トグル, Voices, Level, Speed (Hz) コントロール
PLAYBACK & TIMELINEPlay / Stop ボタン、シークバー、再生時間 / 全体時間 / 総 Tick 数表示

使い方

1. SoundFont (.sf2 / .sf3) のロード

左上のドロップエリアに SoundFont ファイルをドラッグ＆ドロップするか、クリックしてファイルを選択します。一度読み込んだ SoundFont は IndexedDB に自動キャッシュされるため、次回から即時に使用可能です。

2. MIDI (.mid) ファイルの再生

同様にドロップエリアに MIDI ファイルを投入します。自動的に SMF 解析が行われ、中央のピアノロールにノートバーが展開されます。下部の Play ボタンまたはシークバー操作で演奏を開始できます。

3. 音響効果・シンセパラメータの調整

右側のパネル（SYNTH PARAMS）で、リバーブの広がり（Room Size）やコーラスの深さ、最大同時発音数（Polyphony）などを曲に合わせて調整します。

4. チャンネルモニター

左下の MIDI CHANNELS パネルで、現在再生中の各トラックの割り当て楽器名とレベルメーターをモニタリングできます。

技術スタック

  • WebAssembly (FluidSynth 2.4.6) — SoundFont リアルタイムレンダリングエンジン
  • Web Audio API (AudioContext / AudioWorklet) — PCM オーディオストリーム出力 & 時間同期
  • Canvas2D API — 60fps Synthesia 風ピアノロール描画
  • IndexedDB — 大容量 SoundFont バイナリのローカル永続化キャッシュ
  • JavaScript (ES6+) — 自作 SMF パーサー・Smooth Tick 補間ロジック
  • Astro — Webアプリケーション基盤

技術記事

更新履歴

  • [2026-09-12]: v1.0 初回公開。
    • WASM 版 FluidSynth 2.4.6 と AudioWorklet 接続による Web MIDI プレイヤーエンジン構築
    • 自作 SMF パーサーと Synthesia 風 Canvas2D ピアノロールビジュアライザー搭載
    • AudioContext 同期による Smooth Tick 補間スクロール実装
    • IndexedDB による SoundFont ファイルの永続化ローカルキャッシュ
    • 16ch インストゥルメントモニターおよび Reverb / Chorus 等のリアルタイム Synth パラメータ制御機能