Skip to main content

Using audio

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

Import audio​

Put an audio file into the public/ folder and use staticFile() to reference it.
Add an <Audio/> tag to your composition to add sound to it.

tsx
import { AbsoluteFill, Audio, staticFile } from "remotion";
 
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Audio src={staticFile("audio.mp3")} />
    </AbsoluteFill>
  );
};
tsx
import { AbsoluteFill, Audio, staticFile } from "remotion";
 
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Audio src={staticFile("audio.mp3")} />
    </AbsoluteFill>
  );
};

You can also add remote audio by passing a URL:

tsx
import { AbsoluteFill, Audio } from "remotion";
 
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Audio src="https://example.com/audio.mp3" />
    </AbsoluteFill>
  );
};
tsx
import { AbsoluteFill, Audio } from "remotion";
 
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Audio src="https://example.com/audio.mp3" />
    </AbsoluteFill>
  );
};

By default, the audio will play from the start, at full volume and full length. You can mix multiple tracks together by adding more audio tags.

Cutting or trimming the audio​

The <Audio /> tag supports the startFrom and endAt props. In the following example, we assume that the fps of the composition is 30.

tsx
import { AbsoluteFill, Audio, staticFile } from "remotion";
 
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Audio src={staticFile("audio.mp3")} startFrom={60} endAt={120} />
    </AbsoluteFill>
  );
};
tsx
import { AbsoluteFill, Audio, staticFile } from "remotion";
 
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Audio src={staticFile("audio.mp3")} startFrom={60} endAt={120} />
    </AbsoluteFill>
  );
};

By passing startFrom={60}, the playback starts immediately, but with the first 2 seconds of the audio trimmed away.
By passing endAt={120}, any audio after the 4 second mark in the file will be trimmed away.

The audio will play the range from 00:02:00 to 00:04:00, meaning the audio will play for 2 seconds.

Delaying audio​

Use a <Sequence> with a positive from value to delay the audio from playing. In the following example, the audio will start playing (from the beginning) after 100 frames.

tsx
import { AbsoluteFill, Audio, Sequence, staticFile } from "remotion";
 
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Sequence from={100}>
        <Audio src={staticFile("audio.mp3")} />
      </Sequence>
    </AbsoluteFill>
  );
};
tsx
import { AbsoluteFill, Audio, Sequence, staticFile } from "remotion";
 
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Sequence from={100}>
        <Audio src={staticFile("audio.mp3")} />
      </Sequence>
    </AbsoluteFill>
  );
};

Controlling volume​

You can use the volume prop to control the volume.

The simplest way is to pass a number between 0 and 1. 1 is the maximum volume and 0 mutes the audio.

tsx
import { Audio } from "remotion";
import audio from "./audio.mp3";
 
export const MyComposition = () => {
  return (
    <div>
      <div>Hello World!</div>
      <Audio src={audio} volume={0.5} />
    </div>
  );
};
tsx
import { Audio } from "remotion";
import audio from "./audio.mp3";
 
export const MyComposition = () => {
  return (
    <div>
      <div>Hello World!</div>
      <Audio src={audio} volume={0.5} />
    </div>
  );
};

You can also change volume over time by passing in a function that takes a frame number and returns the volume.

tsx
import { AbsoluteFill, Audio, interpolate, staticFile } from "remotion";
 
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Audio
        src={staticFile("audio.mp3")}
        volume={(f) =>
          interpolate(f, [0, 30], [0, 1], { extrapolateLeft: "clamp" })
        }
      />
    </AbsoluteFill>
  );
};
tsx
import { AbsoluteFill, Audio, interpolate, staticFile } from "remotion";
 
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Audio
        src={staticFile("audio.mp3")}
        volume={(f) =>
          interpolate(f, [0, 30], [0, 1], { extrapolateLeft: "clamp" })
        }
      />
    </AbsoluteFill>
  );
};

In this example we are using the interpolate() function to fade the audio in over 30 frames. Note that because values below 0 are not allowed, we need to set the extrapolateLeft: 'clamp' option to ensure no negative values.

Inside the callback function, the first frame at which audio is being played is numbered 0, regardless of the value of useCurrentFrame().

Prefer using a callback function if the volume is changing. This will enable Remotion to draw a volume curve in the timeline and is more performant.

note

When using the <Player>, note that Mobile Safari does not support the volume property. The audio mix may not play as intended.

muted property​

You may pass in the muted and it may change over time. When muted is true, audio will be omitted at that time. In the following example, we are muting the track between frame 40 and 60.

tsx
import { AbsoluteFill, Audio, staticFile, useCurrentFrame } from "remotion";
 
export const MyComposition = () => {
  const frame = useCurrentFrame();
 
  return (
    <AbsoluteFill>
      <Audio src={staticFile("audio.mp3")} muted={frame >= 40 && frame <= 60} />
    </AbsoluteFill>
  );
};
tsx
import { AbsoluteFill, Audio, staticFile, useCurrentFrame } from "remotion";
 
export const MyComposition = () => {
  const frame = useCurrentFrame();
 
  return (
    <AbsoluteFill>
      <Audio src={staticFile("audio.mp3")} muted={frame >= 40 && frame <= 60} />
    </AbsoluteFill>
  );
};

Use audio from <Video /> tags​

Audio from <Video /> and <OffthreadVideo /> tags are also included in the output. You may use the startFrom, endAt, volume and muted props in the same way.

Controlling playback speed​

You can use the playbackRate prop to control the speed of the audio. 1 is the default and means regular speed, 0.5 slows down the audio so it's twice as long and 2 speeds up the audio so it's twice as fast.

While Remotion doesn't limit the range of possible playback speeds, in development mode the HTMLMediaElement.playbackRate API is used which throws errors on extreme values. At the time of writing, Google Chrome throws an exception if the playback rate is below 0.0625 or above 16.

Audio visualization​

You can obtain audio data and create visualizations based on it. See the page Audio visualization for more info.

Rendering audio only​

Exporting as mp3, aac and wav is supported:

<Tabs defaultValue="cli" values={[ { label: 'CLI', value: 'cli', }, { label: 'renderMedia()', value: 'node', }, { label: 'Lambda', value: 'lambda', }, ] }>

To render only the audio via CLI, specify an extension when exporting via CLI:

npx remotion render src/index.ts my-comp out/audio.mp3
npx remotion render src/index.ts my-comp out/audio.mp3

or use the --codec flag to automatically choose a good output file name:

npx remotion render src/index.ts my-comp --codec=mp3
npx remotion render src/index.ts my-comp --codec=mp3

To render only the audio via Node.JS, use renderMedia() and set the codec to an audio codec.

tsx
await renderMedia({
  composition,
  serveUrl: bundleLocation,
  codec: "mp3",
  outputLocation,
  inputProps,
});
tsx
await renderMedia({
  composition,
  serveUrl: bundleLocation,
  codec: "mp3",
  outputLocation,
  inputProps,
});

To render only the audio via Lambda, use renderMediaOnLambda() and set the codec to an audio codec and imageFormat to none.

tsx
const { bucketName, renderId } = await renderMediaOnLambda({
  region: "us-east-1",
  functionName: "remotion-render-bds9aab",
  composition: "MyVideo",
  framesPerLambda: 20,
  serveUrl:
    "https://remotionlambda-qg35eyp1s1.s3.eu-central-1.amazonaws.com/sites/bf2jrbfkw",
  inputProps: {},
  codec: "mp3",
  imageFormat: "none",
  maxRetries: 1,
  privacy: "public",
});
tsx
const { bucketName, renderId } = await renderMediaOnLambda({
  region: "us-east-1",
  functionName: "remotion-render-bds9aab",
  composition: "MyVideo",
  framesPerLambda: 20,
  serveUrl:
    "https://remotionlambda-qg35eyp1s1.s3.eu-central-1.amazonaws.com/sites/bf2jrbfkw",
  inputProps: {},
  codec: "mp3",
  imageFormat: "none",
  maxRetries: 1,
  privacy: "public",
});

To render via the Lambda CLI, use the npx remotion lambda render command and pass the --codec flag:

npx remotion lambda render --codec=mp3 https://remotionlambda-qg35eyp1s1.s3.eu-central-1.amazonaws.com/sites/bf2jrbfkw my-comp
npx remotion lambda render --codec=mp3 https://remotionlambda-qg35eyp1s1.s3.eu-central-1.amazonaws.com/sites/bf2jrbfkw my-comp

See also​