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 {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 using useCurrentFrame() and interpolate().

MyComp.tsx
import {Audio} from '@remotion/media';
import {AbsoluteFill, interpolate, staticFile, useCurrentFrame, useVideoConfig} from 'remotion';

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

  return (
    <AbsoluteFill>
      <Audio src={staticFile('audio.mp3')} volume={interpolate(frame, [0, 1 * fps], [0, 1], {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'})} />
    </AbsoluteFill>
  );
};

In this example we are using the interpolate() function to fade the audio in over 1 second. With Studio interactivity enabled, the Studio recognizes these keyframes, lets you edit them, and draws the resulting volume curve in the timeline. Select an audio or video timeline row and press V to select its volume property. v4.0.530

Note that because values below 0 are not allowed, we need to set the extrapolateLeft: 'clamp' option to ensure no negative values.

Media-relative and procedural volume​

The volume prop also accepts a callback. Use it when the volume should be relative to the start of the media or when the curve cannot be expressed as editable keyframes:

MyComp.tsx
import {Audio} from '@remotion/media';
import {interpolate, staticFile, useVideoConfig} from 'remotion';

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

  return (
    <Audio src={staticFile('audio.mp3')} volume={(mediaFrame) => interpolate(mediaFrame, [0, 1 * fps], [0, 1], {extrapolateRight: 'clamp'})} />
  );
};

The callback frame starts at 0 when the media begins to play and is not necessarily the same as useCurrentFrame(). For looped media, loopVolumeCurveBehavior controls whether it resets on every loop.

Callback volume curves are also drawn in the Studio, but they are not editable as keyframes.