waveform-playlist

Waveform Playlistは、React、Tone.js、Web Audio APIで構築されたブラウザ向けのマルチトラック音声エディタ兼プレイヤーです。波形をキャンバスに描画し、クリップのドラッグ＆ドロップ編集に対応しており、AudacityのようなデスクトップエディタのWebベースの代替となります。 READMEに記載されている主な機能: - マルチトラック編集: トラックごとに複数のクリップを配置でき、ドラッグによる移動とトリムハンドルに対応。 - 波形表示: ズームコントロール付きのキャンバス描画に加え、読み込みを高速化する任意の事前計算済みピークを使用可能。 - エフェクト: Tone.jsのエフェクトライブラリ(リバーブ、ディレイ、フィルター、ディストーションなど)を備え、リアルタイムのパラメータ制御とマスターエフェクトチェーンに対応。 - 録音: AudioWorkletベースのキャプチャ、ライブ波形プレビュー、VUメータリング、Web Components版ではオーバーダブとパンチイン置換に対応。 - 書き出し: 個別トラックまたはミックス全体のWAV書き出しに対応し、進捗を報告。 - 注釈: 時間同期されたテキスト注釈。キーボードナビゲーションとドラッグ編集に対応。 - MIDI: MIDIファイルの解析、ピアノロール表示、SoundFontまたはPolySynthによる再生。 - テーマ: ダークモードとライトモードを備えたカスタマイズ可能なテーマ。 - TypeScript: 型定義を同梱。 使用方法はコンポーネントベースです。一般的な構成では、UIをWaveformPlaylistProviderでラップし、createTrackとcreateClipFromSecondsで作成したトラックを渡し、PlayButton、PauseButton、StopButton、Waveformを組み合わせます。フックは音声の読み込み(useAudioTracks)、トランスポート制御(usePlaylistControls)、再生アニメーション、ズーム、動的エフェクト、WAV書き出しをカバーします。Tone.jsと@dnd-kit/reactはピア依存関係として別途インストールします。 プロジェクトは複数のパッケージで構成されています。ブラウザコンポーネントとフック、コアの型とユーティリティ、フレームワーク非依存のタイムラインエンジン、スタイル付きUIコンポーネント、Tone.jsの再生エンジン、ピーク抽出です。オプションのパッケージでは、MIDI、注釈、録音、共有AudioWorkletプロセッサ、スペクトログラム描画、ピッチを保持した再生レートに対応するHTMLMediaElementベースの再生が追加されます。 実験的なWeb Componentsレイヤー(Litベース、React不要)は、宣言的なdaw-trackおよびdaw-clip要素、命令型エディタAPI、ネイティブWeb AudioとTone.jsの間のアダプタ選択、衝突検出付きのクリップ移動・トリム・分割、元に戻す/やり直し、キーボードショートカット、ファイルドロップ、混合拍子とテンポ変更に対応するメトロノーム、テンポオートメーション、オプションのブラウザ内Faust DSPコンパイルを伴うWAM 2.0プラグインホスティングを提供します。仕様書には要素カタログと移行フェーズが記載されています。 ドキュメントには、ライブのインタラクティブな例、はじめにガイド、APIリファレンスが含まれます。ブラウザサポートには、モダンなWeb Audio API実装(Chrome、Firefox、Safari、Edge)が必要です。プロジェクトはMITライセンスで、SourcefabricのAirtimeプロジェクトに由来します。