Deft
Ask AI

Search

Search skills, authors and topics

remotion-dev / skills

remotion-markup

Structure Remotion scenes with markup patterns for layout, typography, and reusable video UI.

View sourceVideoRemotion

Install

npx skills add https://github.com/remotion-dev/skills --skill remotion-markup
metadata
tags: audio, media, trim, volume, speed, loop, pitch, mute, sound, sfx

Using audio in Remotion

Prerequisites

First, the @remotion/media package needs to be installed. If it is not installed, use the following command:

bash
npx remotion add @remotion/media

Importing Audio

Use <Audio> from @remotion/media to add audio to your composition.

tsx
import { Audio } from "@remotion/media";import { staticFile } from "remotion";
export const MyComposition = () => {  return <Audio src={staticFile("audio.mp3")} />;};

Remote URLs are also supported:

tsx
import { Audio } from "@remotion/media";
<Audio src="https://remotion.media/audio.mp3" />

By default, audio plays from the start, at full volume and full length. Multiple audio tracks can be layered by adding multiple <Audio> components.

Trimming

Use trimBefore to skip the beginning of the audio and durationInFrames to end it early. Values are in frames.

tsx
import { Audio } from "@remotion/media";
const { fps } = useVideoConfig();
return (  <Audio    src={staticFile("audio.mp3")}    trimBefore={2 * fps} // Skip the first 2 seconds    durationInFrames={8 * fps} // Play 8 seconds, until the 10 second mark  />);

The audio still starts playing at the beginning of the composition - only the specified portion is played.

Delaying

Set from directly on <Audio> to delay when it starts:

tsx
import { staticFile, useVideoConfig } from "remotion";import { Audio } from "@remotion/media";
const { fps } = useVideoConfig();
return (  <Audio from={fps} src={staticFile("audio.mp3")} />);

The audio will start playing after 1 second.

Volume

Set a static volume (0 to 1):

tsx
import { Audio } from "@remotion/media";
<Audio src={staticFile("audio.mp3")} volume={0.5} />

Use useCurrentFrame() and interpolate() for keyframed volume:

tsx
import { Audio } from "@remotion/media";import { interpolate, staticFile, useCurrentFrame, useVideoConfig } from "remotion";
const frame = useCurrentFrame();const { fps } = useVideoConfig();
return (  <Audio    src={staticFile("audio.mp3")}    volume={interpolate(frame, [0, 1 * fps], [0, 1], {      extrapolateLeft: "clamp",      extrapolateRight: "clamp",    })}  />);

With Studio interactivity enabled, these keyframes can be edited and are shown as a volume curve in the timeline.

Muting

Use muted to silence the audio. It can be set dynamically:

tsx
import { Audio } from "@remotion/media";
const frame = useCurrentFrame();const { fps } = useVideoConfig();
return (  <Audio    src={staticFile("audio.mp3")}    muted={frame >= 2 * fps && frame <= 4 * fps} // Mute between 2s and 4s  />);

Speed

Use playbackRate to change the playback speed:

tsx
import { Audio } from "@remotion/media";
// 2x speed<Audio src={staticFile("audio.mp3")} playbackRate={2} />// Half speed<Audio src={staticFile("audio.mp3")} playbackRate={0.5} />

Reverse playback is not supported.

Looping

Use loop to loop the audio indefinitely:

tsx
import { Audio } from "@remotion/media";
<Audio src={staticFile("audio.mp3")} loop />

Put name, from, loop, and volume directly on <Audio>.

tsx
import { Audio } from "@remotion/media";import { interpolate, staticFile, useCurrentFrame } from "remotion";
const frame = useCurrentFrame();
<Audio  src={staticFile("audio.mp3")}  loop  volume={interpolate(frame, [0, 300], [1, 0], {    extrapolateLeft: "clamp",    extrapolateRight: "clamp",  })}/>

Pitch

Use toneFrequency to adjust the pitch without affecting speed. Values range from 0.01 to 2:

tsx
import { Audio } from "@remotion/media";
<Audio  src={staticFile("audio.mp3")}  toneFrequency={1.5} // Higher pitch/><Audio  src={staticFile("audio.mp3")}  toneFrequency={0.8} // Lower pitch/>

Pitch shifting only works during server-side rendering, not in the Remotion Studio preview or in the <Player />.