Skip to main content

<Audio>

note

This is documentation for the upcoming new <Audio> tag.
Not to be confused with the older <Audio> tag from remotion.

warning

Very experimental: This component is in a very early stage. The current focus is on correctness, not on performance.

We recommend that you use <Audio /> for now.

This component imports and displays a video, similar to <Audio /> from remotion but during rendering, extracts the exact audio using Mediabunny instead of FFmpeg.

Example​

tsx
import {AbsoluteFill, staticFile} from 'remotion';
import {experimental_Audio as Audio} from '@remotion/media';
 
export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Audio src={staticFile('audio.mp3')} />
    </AbsoluteFill>
  );
};

You can load a video from an URL as well:

tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Audio src="https://remotion.media/audio.wav" />
    </AbsoluteFill>
  );
};

Props​

src​

The URL of the audio to be rendered. Can be a remote URL or a local file referenced with staticFile().

trimBefore?​

Will remove a portion of the audio at the beginning (left side).

In the following example, we assume that the fps of the composition is 30.

By passing trimBefore={60}, the playback starts immediately, but with the first 2 seconds of the audio trimmed away.
By passing trimAfter={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.

For exact behavior, see: Order of operations.

tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Audio src={staticFile('audio.mp3')} trimBefore={60} trimAfter={120} />
    </AbsoluteFill>
  );
};

trimAfter?​

Removes a portion of the audio at the end (right side). See trimBefore for an explanation.

volume?​

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.

Setting a static volume
tsx
import {AbsoluteFill, staticFile} from 'remotion';
import {experimental_Audio as Audio} from '@remotion/media';
 
export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Audio volume={0.5} src={staticFile('background.mp3')} />
    </AbsoluteFill>
  );
};
Changing the volume over time
tsx
import {AbsoluteFill, interpolate, staticFile} from 'remotion';
import {experimental_Audio as Audio} from '@remotion/media';
 
export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Audio volume={(f) => interpolate(f, [0, 30], [0, 1], {extrapolateLeft: 'clamp'})} src={staticFile('voice.mp3')} />
    </AbsoluteFill>
  );
};

name?​

A name and that will be shown as the label of the sequence in the timeline of the Remotion Studio. This property is purely for helping you keep track of items in the timeline.

onError?​

Currently not supported!

playbackRate?v4.0.354​

Controls 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.

Example of a audio playing twice as fast
tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Audio playbackRate={2} src={'https://remotion.media/audio.mp3'} />
    </AbsoluteFill>
  );
};
note

Playing a audio in reverse is not supported.

loop?v3.2.29​

Makes the audio loop indefinitely.

Example of a looped audio
tsx
export const MyComposition = () => {
  return <Audio loop src="https://remotion.media/audio.wav" />;
};

loopVolumeCurveBehavior?v4.0.354​

Controls the frame which is returned when using the volume callback function and adding the loop attribute.

Can be either "repeat" (default, start from 0 on each iteration) or "extend" (keep increasing frames).

muted?​

The muted prop will be respected. It will lead to no audio being played while still keeping the audio tag mounted. It's value may change over time, for example to only mute a certain section of the audio.

Example of a muted video
tsx
export const MyComposition = () => {
  return <Audio muted src="https://remotion.media/audio.wav" />;
};

pauseWhenBuffering?​

If set to true and the audio is loading, the Player will enter into the native buffering state. The default is false, but will become true in Remotion 5.0.

showInTimeline?​

If set to false, no layer will be shown in the timeline of the Remotion Studio. The default is true.

delayRenderTimeoutInMilliseconds?​

Customize the timeout of the delayRender() call that this component makes.

delayRenderRetries?​

Customize the number of retries of the delayRender() call that this component makes.

Setting the cache size​

@remotion/media keeps a cache of video and audio frames.

By default, the cache may grow to up to 50% of the available system memory.
The rendering APIs allow you to customize this limit on a per-render basis.

See in renderMedia() for example: mediaCacheSizeInBytes.

See also​