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 {Audio} from '@remotion/media';
import {AbsoluteFill, staticFile} 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.

MyComp.tsx
import {Audio} from '@remotion/media';
import {AbsoluteFill, 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.