Skip to main content

Controlling Volume

You can use the volume prop to control the volume.

The simplest way is to pass a number between 0 and 1.

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

Changing volume over time​

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, useVideoConfig} from 'remotion';
 
export const MyComposition = () => {
  const {fps} = useVideoConfig();
 
  return (
    <AbsoluteFill>
      <Audio src={staticFile('audio.mp3')} volume={(f) => interpolate(f, [0, 1 * fps], [0, 1], {extrapolateLeft: 'clamp'})} />
    </AbsoluteFill>
  );
};

In this example we are using the interpolate() function to fade the audio in over 1 second.

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 value of f starts always 0 when the audio begins to play.
It is not the same as 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 Studio and is more performant.

Limitationsv4.0.306​

By default, you'll face 2 limitations by default regarding volume:

1
 It is not possible to set the volume to a value higher than 1.
2
 On iOS Safari, the volume will be set to 1.

You can work around these limitations by enabling the Web Audio API for your <Audio>, <Video> and <OffthreadVideo> tags.

tsx
<Audio src="https://parser.media/audio.wav" volume={2} useWebAudioApi crossOrigin="anonymous" />;

However, this comes with two caveats:

1
 You must set the crossOrigin prop to anonymous and the audio must support CORS.
2
 On Safari, you cannot combine it with playbackRate. If you do, the volume will be ignored.