Remotion Adding Audio

Remotion에서 오디오(음악·내레이션·효과음)를 다루는 모든 방법. <Audio> 컴포넌트와 useAudioData() 훅까지 정리한다.

🔊 기본 사용법

import { AbsoluteFill, Audio, staticFile } from "remotion";

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Audio src={staticFile("bgm.mp3")} />
    </AbsoluteFill>
  );
};

public/ 디렉터리의 오디오 파일을 자동으로 동기화해서 재생한다.

🎚️ 주요 속성

prop	설명
`src`	오디오 소스 (`staticFile()` 권장)
`volume`	음량 (0~1) 또는 콜백 함수 `(frame) => number`
`startFrom`	시작 프레임 (seconds×fps)
`endAt`	종료 프레임
`playbackRate`	배속 (1=원본, 2=2배속)
`muted`	음소거
`loop`	루프 재생
`toneFrequency`	pitch 변경 시 베이스 주파수 (Hz)

🎵 음량을 프레임마다 변경

음량도 useCurrentFrame()으로 제어 가능. 페이드 인·아웃 패턴:

import { Audio, interpolate, useCurrentFrame, staticFile } from "remotion";

export const MyComposition = () => {
  const frame = useCurrentFrame();
  const volume = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });

  return <Audio src={staticFile("bgm.mp3")} volume={volume} />;
};

✂️ 부분 구간만 재생

인트로만 음악 나오게 하기:

<Audio
  src={staticFile("bgm.mp3")}
  startFrom={0}      // 0초부터
  endAt={5 * 30}     // 5초까지 (30fps 가정)
/>

🔁 음악 페이드 인 + 루프

배경음을 부드럽게 시작하고 영상 끝까지 계속:

<Audio
  src={staticFile("lofi.mp3")}
  volume={(f) => interpolate(f, [0, 60, 240, 300], [0, 0.6, 0.6, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" })}
  loop
/>

📊 오디오 데이터 분석 (시각화)

useAudioData() + AudioVisualization 컴포넌트로 오디오 스펙트럼/파형을 시각화:

import { useAudioData, AudioVisualization } from "remotion";

export const MyComposition = () => {
  const audioData = useAudioData(staticFile("music.mp3"));
  if (!audioData) return null;
  return <AudioVisualization audioData={audioData} />;
};

📌 사용 전 remotion enable-audio-visualization 실행 필요 (자세한 가이드)

🎤 내레이션 + BGM 동시 재생

여러 <Audio>를 겹쳐서 재생:

<AbsoluteFill>
  <Audio src={staticFile("narration.mp3")} volume={1} />
  <Audio src={staticFile("bgm.mp3")} volume={0.3} />
</AbsoluteFill>

⚠️ 알아둘 점

음소거 비디오는 muted 대신 <Audio>를 따로 두지 않고 비디오 자체를 <Video muted />로 처리
MP3 호환성 최고. WAV는 무손실이지만 용량 큼
<Audio>는 React 컴포넌트라 조건부 렌더링으로 사운드 켜고 끄기 가능
오디오 페이드: volume을 함수로 전달해 부드러운 인/아웃 처리

📚 영역 구분

오디오 시각화: Remotion 비주얼 & 미디어 (해당 페이지)
자막/트랜스크립션: Remotion Captions
한글 hub: Remotion 비주얼 & 미디어

상위 문서: ← Remotion 비주얼 & 미디어 출처: Remotion 공식 문서 — Adding audio 한글화 (2026-07-29) 공급사: Remotion AG

변경 이력

날짜	변경
2026-07-29	초판 작성 (공식 Adding audio 가이드 한글화)
2026-07-29	메타데이터 블록을 본문 하단으로 이동