MIDI ビジュアライザー piano-visualizer を作った

MIDI ビジュアライザー @marmooo/piano-visualizer を公開しました。 デモ動画は moi moi MIDI 様の MIDI 素材のうち、神秘の森 (arcanum.md) を利用させて頂きました。

MIDI ビジュアライザー piano-visualizer を公開しました。様々な設定などが柔軟にできます。パーティクルは今後さらに改良したいところ。デモ動画は moi moi MIDI 様の MIDI 素材のうち、神秘の森 (arcanum.mid) を利用させて頂きました。 https://t.co/6gQ2pNc5Vg #個人開発 pic.twitter.com/m4TNL5LI5X

— marmooo (@marmooo) June 27, 2026

以下から Web 上で利用できます。

@marmooo/piano-visualizer

MIDI ビジュアライザーは様々なアプリがありますが、自分用のものが欲しくて作りました。 Web 上で動いて、高速・軽量に動作し、格好良いものが欲しかったです。 格好良さはまだ実現しきれていませんが、とりあえず実用レベルになってきたので公開することにしました。

今のところは OfflineScreenCanvas などを駆使してメインスレッドを専有しないようにして高速化し、 設定項目をわかりやすく整理できているのが利点かなあ。 ここからは様々なエフェクトを加えていきたいところですが、 MIDI 再生部分などもまだまだ改良できることがたくさんあるので、なかなか実装が進んでいません。

正直原型となるものは1年以上前からできていました。 もっと早く公開しようと思っていたのですが、まずは Midy を使い物にする必要があり、そこで非常に時間が掛かりました。 TypeScript 化してテストも追加してようやく安定してきたので、2ヶ月くらい前にいよいよ公開しようと思いました。 しかしついでにやり始めた高速化が沼で、余地がガンガン見つかってしまい、どんどん公開が後回しになり、1ヶ月近く遅れてしまいました。 その甲斐もあってか 0.5.6 から 0.5.7 への更新で、再生負荷は半分以下になりました。 不要なオーディオノードを削るだけでこんなに高速化できるとはな…。 既にほとんどすべての MIDI ファイルで負荷を感じることがなくなってきました。 ここまで来ると最軽量実装を目指せるんじゃないか。 さらに 20% 高速化できることがわかっているので、0.5.8 で適用します。 まさに最適化沼。 ちなみに piano-visualizer のほうはそれほど最適化余地が大きくないことがわかっているので、実装の難易度は高くありません。 Canvas は色々最適化しようとしても、結局あまり早くならないことが多いのです。

そんなこんなで完全にゼロから実装しているので、かなり時間が掛かっています。 Midy を作り始めてから気付いたら 1年半くらい経っています。 雑な再生、雑なビジュアライザーならあっさり作れたのですが、そこから本格的にするのは大変でした。 何事も本気になってからが、なかなか大変なものです。