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. 1 is normal, 2 is double speed, 0.5 is half speed.
• toneFrequency: Adjusts pitch without affecting speed. Values range from 0.01 to 2.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 muted prop for conditional silencing rather than setting volume={0} to improve performance.
• Loading: Use the <Audio> component from @remotion/media instead 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 exceeding 1 or falling below 0.