Skip to main content

Controlling volume and muting

Use volume and muted to control sound from both <Video> and <Audio>.

Setting the volume​

Pass a number between 0 and 1 to volume. The default is 1; 0 silences the media.

MyScene.tsx
import {Video} from '@remotion/media';
import {staticFile} from 'remotion';

export const MyScene = () => {
  return <Video src={staticFile('video.mp4')} volume={0.5} />;
};

Changing volume over time​

Use useCurrentFrame() and interpolate() to animate volume. This example fades the sound in over 1 second:

MyScene.tsx
import {Video} from '@remotion/media';
import {interpolate, staticFile, useCurrentFrame, useVideoConfig} from 'remotion';

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

  return (
    <Video
      src={staticFile('video.mp4')}
      volume={interpolate(frame, [0, fps], [0, 1], {
        extrapolateLeft: 'clamp',
        extrapolateRight: 'clamp',
      })}
    />
  );
};

Clamping keeps the volume between 0 and 1 outside the fade. To fade out, use [1, 0] as the output range and choose the frames where the fade should start and end.

Keep interpolate() inline in the volume prop so Studio interactivity can recognize and edit the keyframes and draw the volume curve in the timeline. Select an audio or video timeline row and press V to select its volume property. v4.0.530

Muting​

Pass muted to silence a clip. For videos, the picture continues playing.

You can change muted over time. This example mutes sound from 2 seconds up to, but not including, 4 seconds:

MyScene.tsx
import {Video} from '@remotion/media';
import {staticFile, useCurrentFrame, useVideoConfig} from 'remotion';

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

  return <Video src={staticFile('video.mp4')} muted={frame >= 2 * fps && frame < 4 * fps} />;
};

The muted prop is also supported by <OffthreadVideo>, <Html5Video> and <Html5Audio>.

See also​