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.

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

export const MyComposition = () => {
  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:

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

export const MyComposition = () => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();
  const volume = interpolate(frame, [0, fps], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

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

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.

With Studio interactivity enabled, the Studio recognizes these keyframes, lets you edit them, and draws 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:

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

export const MyComposition = () => {
  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​