Remotion 오디오 & 자막 — 사운드와 비주얼의 동기화
<Audio>, <OffthreadVideo>, useAudioData()로 오디오/비디오 소스를 프레임에 동기화
비디오에서 사운드와 비주얼의 동기화는 핵심 요소입니다.
: MP3/WAV 파일을 비디오에 삽입합니다. startFrom, endAt prop으로 오디오의 특정 구간만 사용하거나, volume prop에 함수를 전달하여 프레임별 볼륨을 제어할 수 있습니다. Sequence 안에 넣으면 해당 장면에서만 재생됩니다.
useAudioData() + getWaveformPortion(): 오디오 파일의 파형 데이터를 추출하여 현재 프레임의 진폭을 비주얼에 반영합니다. 음악에 맞춰 바가 춤추는 오디오 비주얼라이저를 구현할 수 있습니다.
@remotion/captions: TTS 엔진이나 Whisper에서 생성된 자막 데이터(타임스탬프 포함)를 프레임 단위로 동기화하여 자막을 표시합니다.
동작 흐름
<Audio src={audioUrl} />로 비디오에 오디오 트랙 삽입 (Sequence 안에 배치 가능)
volume prop에 (f) => interpolate(f, [0, 30], [0, 1]) 전달하여 페이드인 효과
useAudioData()로 파형 로드 → getWaveformPortion()으로 현재 프레임의 진폭 추출
진폭 데이터를 SVG/CSS 스타일에 반영하여 오디오 비주얼라이저 렌더링
@remotion/captions로 자막 JSON을 파싱하고 현재 프레임에 맞는 자막 텍스트 표시
장점
- ✓ 프레임 정밀도: 오디오/자막/비주얼이 정확히 같은 프레임에 동기화
- ✓ OffthreadVideo로 기존 영상 합성 시 메인 스레드 차단 없음
- ✓ 볼륨 함수로 프레임별 볼륨 제어 → 자연스러운 크로스페이드
단점
- ✗ 오디오 파형 분석은 CPU 집약적 → 긴 오디오 파일에서 성능 저하
- ✗ 자막 동기화를 위한 타임스탬프 데이터를 별도로 준비해야 함