Using audio in Remotion

Prerequisites

First, the @remotion/media package needs to be installed. If it is not installed, use the following command:

npx remotion add @remotion/media # If project uses npm
bunx remotion add @remotion/media # If project uses bun
yarn remotion add @remotion/media # If project uses yarn
pnpm exec remotion add @remotion/media # If project uses pnpm

Importing Audio

Use `` from @remotion/media to add audio to your composition.

  return ;
};

Remote URLs are also supported:

By default, audio plays from the start, at full volume and full length. Multiple audio tracks can be layered by adding multiple `` components.

Trimming

Use trimBefore and trimAfter to remove portions of the audio. Values are in frames.

const { fps } = useVideoConfig();

return (
  
);

The audio still starts playing at the beginning of the composition - only the specified portion is played.

Delaying

Wrap the audio in a `` to delay when it starts:

const { fps } = useVideoConfig();

return (
  
    
  
);

The audio will start playing after 1 second.

Volume

Set a static volume (0 to 1):

Or use a callback for dynamic volume based on the current frame:

const { fps } = useVideoConfig();

return (
  
      interpolate(f, [0, 1 * fps], [0, 1], { extrapolateRight: "clamp" })
    }
  />
);

The value of f starts at 0 when the audio begins to play, not the composition frame.

Muting

Use muted to silence the audio. It can be set dynamically:

const frame = useCurrentFrame();
const { fps } = useVideoConfig();

return (
  = 2 * fps && frame <= 4 * fps} // Mute between 2s and 4s
  />
);

Speed

Use playbackRate to change the playback speed:

Reverse playback is not supported.

Looping

Use loop to loop the audio indefinitely:

Use loopVolumeCurveBehavior to control how the frame count behaves when looping:

• "repeat": Frame count resets to 0 each loop (default)
• "extend": Frame count continues incrementing

 interpolate(f, [0, 300], [1, 0])} // Fade out over multiple loops
/>

Pitch

Use toneFrequency to adjust the pitch without affecting speed. Values range from 0.01 to 2:

Pitch shifting only works during server-side rendering, not in the Remotion Studio preview or in the ``.