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 {staticFile} from 'remotion';

export const MyComposition = () => {
  return (
    <>
      <div>Hello World!</div>
      <Audio src={staticFile('audio.mp3')} volume={0.5} />
    </>
  );
};

Changing volume over time

You can also change volume over time using useCurrentFrame() and interpolate().

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

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

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

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.