Skip to main content

<Audio />

Using this component, you can add audio to your video. All audio formats which are supported by Chromium are supported by the component.

API / Example

Use an import or require to load an audio file and pass it to the src props of the <Audio /> component.

The component also accepts a volume props which allows you to control the volume of the audio in it's entirety or frame by frame. Read the page on using audio to learn more.

<Audio> has two more helper props: startFrom and endAt for defining the start frame and end frame. Both are optional and do not get forwarded to the native <audio> element but tell Remotion which portion of the audio should be included.

tsx
import { Audio } from "remotion";
import audio from "./audio.mp3";
 
export const MyVideo = () => {
return (
<div>
<div>Hello World!</div>
<Audio
src={audio}
startFrom={59} // if composition is 30fps, then it will start at 2s
endAt={120} // if composition is 30fps, then it will end at 4s
/>
</div>
);
};
tsx
import { Audio } from "remotion";
import audio from "./audio.mp3";
 
export const MyVideo = () => {
return (
<div>
<div>Hello World!</div>
<Audio
src={audio}
startFrom={59} // if composition is 30fps, then it will start at 2s
endAt={120} // if composition is 30fps, then it will end at 4s
/>
</div>
);
};

Controlling volume

You can use the volume prop to control the loudness of the audio. See Controlling audio for more information.

Controlling playback speed

Available from v2.2

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.

See also