audio

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 <Audio> from @remotion/media to add audio to your composition.

import { Audio } from "@remotion/media";
import { staticFile } from "remotion";

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

Remote URLs are also supported:

<Audio src="https://remotion.media/audio.mp3" />

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

Trimming

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

const { fps } = useVideoConfig();

return (
  <Audio
    src={staticFile("audio.mp3")}
    trimBefore={2 * fps} // Skip the first 2 seconds
    trimAfter={10 * fps} // End at the 10 second mark
  />
);

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

Delaying

Wrap the audio in a <Sequence> to delay when it starts:

import { Sequence, staticFile } from "remotion";
import { Audio } from "@remotion/media";

const { fps } = useVideoConfig();

return (
  <Sequence from={1 * fps}>
    <Audio src={staticFile("audio.mp3")} />
  </Sequence>
);

The audio will start playing after 1 second.

Volume

Set a static volume (0 to 1):

<Audio src={staticFile("audio.mp3")} volume={0.5} />

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

import { interpolate } from "remotion";

const { fps } = useVideoConfig();

return (
  <Audio
    src={staticFile("audio.mp3")}
    volume={(f) =>
      interpolate(f, [0, 1 * fps], [0, 1], { extrapolateRight: "clamp" })
    }
  />
);