🔊
Remotionオーディオ & 字幕 — サウンドとビジュアルの同期
<Audio>、<OffthreadVideo>、useAudioData()でオーディオ/ビデオソースをフレームに同期
ビデオにおけるサウンドとビジュアルの同期は核心的な要素です。
: MP3/WAVファイルをビデオに挿入します。startFrom/endAt propでオーディオの特定区間のみ使用したり、volume propに関数を渡してフレームごとの音量を制御できます。Sequenceの中に入れると該当シーンでのみ再生されます。
useAudioData() + getWaveformPortion(): オーディオファイルの波形データを抽出して現在のフレームの振幅をビジュアルに反映します。音楽に合わせてバーが踊るオーディオビジュアライザーを実装できます。
@remotion/captions: TTSエンジンやWhisperで生成された字幕データ（タイムスタンプ付き）をフレーム単位で同期して字幕を表示します。
動作フロー
1
<Audio src={audioUrl} />でビデオにオーディオトラックを挿入（Sequence内に配置可能）
2
volume propに(f) => interpolate(f, [0, 30], [0, 1])を渡してフェードイン効果
3
useAudioData()で波形をロード → getWaveformPortion()で現在のフレームの振幅を抽出
4
振幅データをSVG/CSSスタイルに反映してオーディオビジュアライザーをレンダリング
5
@remotion/captionsで字幕JSONをパースし現在のフレームに合った字幕テキストを表示
メリット
- ✓ フレーム精度: オーディオ/字幕/ビジュアルが正確に同じフレームに同期
- ✓ OffthreadVideoで既存映像合成時にメインスレッドをブロックしない
- ✓ ボリューム関数でフレームごとの音量制御 → 自然なクロスフェード
デメリット
- ✗ オーディオ波形分析はCPU集約的 → 長いオーディオファイルでパフォーマンス低下
- ✗ 字幕同期のためのタイムスタンプデータを別途準備する必要がある
ユースケース
ポッドキャストビデオ: オーディオに合わせた波形ビジュアライザー + 自動字幕
ミュージックビデオ: 音楽のビートに合わせてグラフィックが反応するモーショングラフィックス
TTSベースコンテンツ: AI音声 + 自動生成字幕 + ビジュアル同期