音を、波形で
魅せる。
wavesurfer.js は、Web Audio API の上にCanvas波形描画とプラグイン群を載せたオープンソースのオーディオUIライブラリ。 このページの波形はすべて本物 — クリック・ドラッグ・録音まで、実際に触って確かめられます。
波形をフォーカスして Space 再生 · ←→ シーク · ↑↓ 音量
プラグインで広がる表現
コアは軽量な波形描画。必要な機能だけをプラグインとして追加できるのが wavesurfer.js の強みです。
Canvas波形描画
core数千のピーク点をCanvasで軽量描画。バー/連続線/分割チャンネルなど自由自在。
リージョン
regions区間の作成・ドラッグ・リサイズ・ループ再生。文字起こしやマーカーUIに。
スペクトログラム
spectrogramFFTによる周波数ヒートマップ。Mel/Log/Linearスケールに対応。
タイムライン
timeline目盛り付きの時間軸を波形上下に表示。間隔やラベルも調整可能。
ミニマップ
minimap全体を俯瞰する縮小波形。ズーム時のナビゲーションに最適。
ホバーカーソル
hoverマウス位置の時間をツールチップ表示。シーク前のプレビューに。
ズーム
zoomホイール/ピンチ/スライダーで滑らかに拡大縮小。サンプル単位まで。
録音
recordMediaRecorderでマイク録音。ライブ波形をリアルタイム描画。
エンベロープ
envelope音量オートメーション曲線をドラッグで編集。フェードやダッキングに。
区間を切り出してループ再生
波形上をドラッグすると区間（リージョン）を作成できます。区間はドラッグで移動・リサイズでき、クリックで頭出し再生。ループをONにすると区間を繰り返します。曲のフレーズ確認や文字起こしUIの基盤になります。
wavesurfer.js/dist/plugins/regions.esm.js — enableDragSelection() / region.play()音を周波数で可視化
FFT解析による周波数スペクトログラム。時間（横）×周波数（縦）×強度（色）で音色を可視化します。Mel/Log/Linearのスケール切り替えに対応。打楽器系トラックでは縦のアタック、パッド系では倍音の帯がはっきり見えます。
spectrogram.esm.js — scale: 'mel' | 'logarithmic' | 'linear'フィルタでリアルタイムに音作り
wavesurfer は Web Audio API の上に載るので、再生中の音声を BiquadFilterNode の5バンドEQに通せます。スライダーを動かすと音色と右のスペクトラムが即座に変化。「波形ライブラリ」を超えてオーディオ処理基盤になることを示す一例です。
ws.getMediaElement() + AudioContext.createBiquadFilter() / AnalyserNode音量をカーブで自動化
エンベロープ・プラグインで音量オートメーションを波形に重ねて描画。ポイントをドラッグしてフェードやダッキングのカーブを作れます。再生すると音量がカーブに追従し、左の VOL メーターが動きます。BGMのダッキングやフェード処理に。
envelope.esm.js — setPoints([{ time, volume }]) / on('points-change')サンプル単位までズーム
マウスホイール・ピンチ・スライダーで滑らかにズーム。拡大中も下のミニマップで全体を俯瞰でき、クリックで瞬時に移動できます。波形編集ツールのような操作感を数行で実現します。
zoom.esm.js + minimap.esm.js — ws.zoom(pxPerSec)同じ音源、違う表情
色・バー幅・整列・分割チャンネルなどのオプションだけで、まったく異なる見た目に。すべて同一の音源を異なるスタイルで描画しています。クリックで再生できます。
マイクからライブ録音
MediaRecorder と連携し、マイク入力をリアルタイムに波形描画。録音停止後はそのまま再生・ダウンロードできます。ボイスメモやオーディオ投稿UIにそのまま使えます。
record.esm.js — startRecording() / on('record-end', blob => ...)
波形にタイムコメント
マーカー（幅0のリージョン）を使えば、SoundCloud のような時間付きコメントUIが作れます。再生位置を選んでコメントを追加すると波形上にピンが立ち、一覧やピンのクリックでその瞬間へ頭出しできます。
regions.esm.js — addRegion({ start, content }) / on('region-clicked')