1---
2name: audio
3description: Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
4metadata:
5  tags: audio, media, trim, volume, speed, loop, pitch, mute, sound, sfx
6---
7 
8# Using audio in Remotion
9 
10## Prerequisites
11 
12First, the @remotion/media package needs to be installed.
13If it is not installed, use the following command:
14 
15```bash
16npx remotion add @remotion/media
17```
18 
19## Importing Audio
20 
21Use `<Audio>` from `@remotion/media` to add audio to your composition.
22 
23```tsx
24import { Audio } from "@remotion/media";
25import { staticFile } from "remotion";
26 
27export const MyComposition = () => {
28  return <Audio src={staticFile("audio.mp3")} />;
29};
30```
31 
32Remote URLs are also supported:
33 
34```tsx
35<Audio src="https://remotion.media/audio.mp3" />
36```
37 
38By default, audio plays from the start, at full volume and full length.
39Multiple audio tracks can be layered by adding multiple `<Audio>` components.
40 
41## Trimming
42 
43Use `trimBefore` and `trimAfter` to remove portions of the audio. Values are in frames.
44 
45```tsx
46const { fps } = useVideoConfig();
47 
48return (
49  <Audio
50    src={staticFile("audio.mp3")}
51    trimBefore={2 * fps} // Skip the first 2 seconds
52    trimAfter={10 * fps} // End at the 10 second mark
53  />
54);
55```
56 
57The audio still starts playing at the beginning of the composition - only the specified portion is played.
58 
59## Delaying
60 
61Wrap the audio in a `<Sequence>` to delay when it starts:
62 
63```tsx
64import { Sequence, staticFile } from "remotion";
65import { Audio } from "@remotion/media";
66 
67const { fps } = useVideoConfig();
68 
69return (
70  <Sequence from={1 * fps}>
71    <Audio src={staticFile("audio.mp3")} />
72  </Sequence>
73);
74```
75 
76The audio will start playing after 1 second.
77 
78## Volume
79 
80Set a static volume (0 to 1):
81 
82```tsx
83<Audio src={staticFile("audio.mp3")} volume={0.5} />
84```
85 
86Or use a callback for dynamic volume based on the current frame:
87 
88```tsx
89import { interpolate } from "remotion";
90 
91const { fps } = useVideoConfig();
92 
93return (
94  <Audio
95    src={staticFile("audio.mp3")}
96    volume={(f) =>
97      interpolate(f, [0, 1 * fps], [0, 1], { extrapolateRight: "clamp" })
98    }
99  />
100);
101```
102 
103The value of `f` starts at 0 when the audio begins to play, not the composition frame.
104 
105## Muting
106 
107Use `muted` to silence the audio. It can be set dynamically:
108 
109```tsx
110const frame = useCurrentFrame();
111const { fps } = useVideoConfig();
112 
113return (
114  <Audio
115    src={staticFile("audio.mp3")}
116    muted={frame >= 2 * fps && frame <= 4 * fps} // Mute between 2s and 4s
117  />
118);
119```
120 
121## Speed
122 
123Use `playbackRate` to change the playback speed:
124 
125```tsx
126<Audio src={staticFile("audio.mp3")} playbackRate={2} /> {/* 2x speed */}
127<Audio src={staticFile("audio.mp3")} playbackRate={0.5} /> {/* Half speed */}
128```
129 
130Reverse playback is not supported.
131 
132## Looping
133 
134Use `loop` to loop the audio indefinitely:
135 
136```tsx
137<Audio src={staticFile("audio.mp3")} loop />
138```
139 
140Use `loopVolumeCurveBehavior` to control how the frame count behaves when looping:
141 
142- `"repeat"`: Frame count resets to 0 each loop (default)
143- `"extend"`: Frame count continues incrementing
144 
145```tsx
146<Audio
147  src={staticFile("audio.mp3")}
148  loop
149  loopVolumeCurveBehavior="extend"
150  volume={(f) => interpolate(f, [0, 300], [1, 0])} // Fade out over multiple loops
151/>
152```
153 
154## Pitch
155 
156Use `toneFrequency` to adjust the pitch without affecting speed. Values range from 0.01 to 2:
157 
158```tsx
159<Audio
160  src={staticFile("audio.mp3")}
161  toneFrequency={1.5} // Higher pitch
162/>
163<Audio
164  src={staticFile("audio.mp3")}
165  toneFrequency={0.8} // Lower pitch
166/>
167```
168 
169Pitch shifting only works during server-side rendering, not in the Remotion Studio preview or in the `<Player />`.
170