Screenshots
Overview
概要
wavesurfer.jsは、Web Audio APIの上にCanvas波形描画とプラグイン群を載せたオープンソースのオーディオUIライブラリです。本サイトはその『何ができるか』を読むのではなく体感してもらうことを狙い、リージョン・タイムコメント・スペクトログラム・Web Audio EQ・エンベロープ・ズーム+ミニマップ・描画スタイル・録音という8つのデモを、スタジオ調の暗いトーンでまとめています。再生される音源はすべてプログラムで合成したロイヤリティフリー素材です。
How to use
遊び方・使い方
上から順に各セクションのデモを触れます。波形上をドラッグして区間(リージョン)を作る、再生位置にタイムコメントのピンを立てる、スペクトログラムのスケール(Mel/Log/Linear)を切り替える、5バンドEQのフェーダーを動かして音色とスペクトラムの変化を見る、音量カーブ(エンベロープ)をドラッグで編集する、ホイール/ピンチでズームしてミニマップで俯瞰する、同じ音源を6種の見た目で見比べる、マイクからライブ録音して再生・保存する——いずれもその場で動作します。ヒーローのプレイヤーは波形をフォーカスしてキーボード(Space/矢印)でも操作できます。
Tech stack
技術スタック
Next.js 16(App Router)上で wavesurfer.js 7.12 と公式プラグイン(regions/spectrogram/timeline/minimap/hover/zoom/envelope/record)を利用。EQデモはwavesurferのmedia要素をcreateMediaElementSource→BiquadFilter5段→AnalyserNode→destinationに接続し、フィルタ後のスペクトラムをcanvasにライブ描画します。波形はCanvasGradientで着色し、各デモはブラウザ専用処理をuseEffect内に閉じてSSR(静的生成)と両立させています。
Highlights
工夫した点
- wavesurferのインスタンス生成・イベント購読・破棄を共通フックに集約し、Strict Modeの二重マウントやdestroy時のAbortErrorを安全に処理
- デモが多いため各wavesurferをIntersectionObserverで遅延マウントし、初回ロードで十数個の音源が一斉にデコードされるのを回避(スケルトンで高さ予約しレイアウトシフトも抑制)
- スペクトログラムのデコード既定sampleRate(8000Hz/Nyquist4000)で生じる高域の空白帯を、16kHzデコードに上げて解消。スケール/配色の切替はプラグインのみ差し替えて再デコードのちらつきを回避
To improve
改善したい点
- トラック切替や再生速度・音量が一部のデモに限られ、全デモ共通のトランスポートUIには未統一
- ピーク事前計算(peaks)を渡せば描画パフォーマンスをさらに削減できる余地
- リージョンのドラッグ作成色のローテーションなど細部の磨き込み
What's next
今後の展望
- マルチトラック・ミキサーや波形からのAnalyserNode連携ビジュアライザの追加
- 波形クリックでのコメント編集・共有リンク化など実用UIへの発展
- ピーク事前計算によるデコードレス描画の導入