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
import {Html5Audio, staticFile, AbsoluteFill} from 'remotion';

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <div>Hello World!</div>
      <Html5Audio 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.

import {AbsoluteFill, Html5Audio, interpolate, staticFile, useVideoConfig} from 'remotion';

export const MyComposition = () => {
  const {fps} = useVideoConfig();

  return (
    <AbsoluteFill>
      <Html5Audio 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 <Html5Audio>, <Html5Video> and <OffthreadVideo> tags.


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

However, this comes with two caveats:

You must set the crossOrigin prop to anonymous and the audio must support CORS.

On Safari, you cannot combine it with playbackRate. If you do, the volume will be ignored.