Controlling Volume

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

You can use the volume prop to control the volume.

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

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.

Limitations<AvailableFrom v="4.0.306" />

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

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

import {Html5Audio, staticFile, AbsoluteFill} from 'remotion';
// ---cut---

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

However, this comes with two caveats: