Audio & Sound Design
Remotion allows you to treat audio as a first-class citizen using the @remotion/media package. By leveraging React's component-based architecture, you can programmatically control volume, timing, and effects.
Prerequisites
To use audio components, you must install the media package:
npx remotion add @remotion/media
Importing Audio Assets
Local Assets
Place your audio files in the public/ folder. You must use the staticFile() helper to ensure paths are resolved correctly during both development and deployment.
import { Audio } from "@remotion/media";
import { staticFile } from "remotion";
export const MyComposition = () => {
return <Audio src={staticFile("background-music.mp3")} />;
};
Remote Assets
Remote URLs are supported directly:
<Audio src="https://example.com/podcast-clip.wav" />
Timeline Control: Trimming and Delaying
Trimming
Use the trimBefore and trimAfter props to play a specific segment of an audio file. Values are defined in frames.
import { Audio } from "@remotion/media";
import { useVideoConfig } from "remotion";
export const TrimmedAudio = () => {
const { fps } = useVideoConfig();
return (
<Audio
src={staticFile("audio.mp3")}
trimBefore={2 * fps} // Skips first 2 seconds
trimAfter={10 * fps} // Stops playing at the 10-second mark of the source
/>
);
};
Delaying (Sequencing)
To start audio at a specific point in the composition's timeline, wrap the component in a <Sequence>.
import { Sequence } from "remotion";
import { Audio } from "@remotion/media";
// Audio starts playing 3 seconds into the video
<Sequence from={3 * fps}>
<Audio src={staticFile("sfx.mp3")} />
</Sequence>
Volume Control and Curves
Volume can be set as a static value or as a dynamic function of the current frame.
Static Volume
Values range from 0 (muted) to 1 (full volume).
<Audio src={staticFile("music.mp3")} volume={0.5} />
Dynamic Volume Curves
To create fade-ins, fade-outs, or ducking effects, pass a callback function to the volume prop. The argument f represents the current frame relative to the start of the audio playback.
import { interpolate } from "remotion";
<Audio
src={staticFile("ambient.mp3")}
volume={(f) =>
interpolate(f, [0, 30], [0, 1], {
extrapolateRight: "clamp",
})
}
/>
Advanced Audio Properties
Playback Rate and Pitch
You can manipulate the speed and tone of your audio independently.
playbackRate: Controls speed.1is normal,2is double speed,0.5is half speed.toneFrequency: Adjusts pitch without affecting speed. Values range from0.01to2.0.
<Audio
src={staticFile("voice.mp3")}
playbackRate={1.2}
toneFrequency={1.1} // Slightly higher pitch
/>
Note:
toneFrequency(pitch shifting) is only applied during server-side rendering and will not be audible in the Remotion Studio preview.
Looping
Enable the loop prop to repeat the audio for the duration of its container.
<Audio
src={staticFile("loop-track.mp3")}
loop
loopVolumeCurveBehavior="repeat" // Restarts volume frame count at 0 each loop
/>
Multi-Track Layering
Layering sound is achieved by rendering multiple <Audio> components. Because they are React components, they will play simultaneously.
export const Soundscape = () => {
return (
<>
{/* Background Music Layer */}
<Audio src={staticFile("bg-music.mp3")} volume={0.3} />
{/* Voiceover Layer */}
<Sequence from={15}>
<Audio src={staticFile("narration.mp3")} />
</Sequence>
{/* Sound Effect Layer */}
<Sequence from={60}>
<Audio src={staticFile("impact.wav")} volume={0.8} />
</Sequence>
</>
);
};
Best Practices
- Muting: Use the
mutedprop for conditional silencing rather than settingvolume={0}to improve performance. - Loading: Use the
<Audio>component from@remotion/mediainstead of the native HTML<audio>tag; the Remotion component ensures that frames are not rendered until the audio asset is buffered. - Interpolation: Always use
extrapolateRight: "clamp"when creating volume curves to prevent volume values from exceeding1or falling below0.