<Audio>
Using this component, you can add audio to your video. All audio formats which are supported by Chromium are supported by the component.
API
src
Put an audio file into the public/
folder and use staticFile()
to reference it.
tsx
import {AbsoluteFill ,Audio ,staticFile } from 'remotion';export constMyVideo = () => {return (<AbsoluteFill ><Audio src ={staticFile ('audio.mp3')} /></AbsoluteFill >);};
volume?
The component also accepts a volume
props which allows you to control the volume of the audio in it's entirety or frame by frame. Read the page on using audio to learn more.
Setting a static volumetsx
import {AbsoluteFill ,Audio ,staticFile } from 'remotion';export constMyVideo = () => {return (<AbsoluteFill ><Audio volume ={0.5}src ={staticFile ('background.mp3')} /></AbsoluteFill >);};
Changing the volume over timetsx
import {AbsoluteFill ,Audio ,interpolate ,staticFile } from 'remotion';export constMyVideo = () => {return (<AbsoluteFill ><Audio volume ={(f ) =>interpolate (f , [0, 30], [0, 1], {extrapolateLeft : 'clamp'})}src ={staticFile ('voice.mp3')} /></AbsoluteFill >);};
By default, volumes between 0 and 1 are supported, where in iOS Safari, the volume is always 1.
See Volume Limitations for more information.
loopVolumeCurveBehavior?
v4.0.142
Controls the frame
which is returned when using the volume
callback function and adding the loop
attribute.
Can be either "repeat"
(default, start from 0 on each iteration) or "extend"
(keep increasing frames).
startFrom?
/ endAt?
<Audio>
has two more helper props you can use:
startFrom
will remove a portion of the audio at the beginningendAt
will remove a portion of the audio at the end
In the following example, we assume that the fps
of the composition is 30
.
By passing startFrom={60}
, the playback starts immediately, but with the first 2 seconds of the audio trimmed away.
By passing endAt={120}
, any audio after the 4 second mark in the file will be trimmed away.
The audio will play the range from 00:02:00
to 00:04:00
, meaning the audio will play for 2 seconds.
tsx
import {AbsoluteFill ,Audio ,staticFile } from 'remotion';export constMyVideo = () => {return (<AbsoluteFill ><Audio src ={staticFile ('audio.mp3')}startFrom ={60}endAt ={120} /></AbsoluteFill >);};
playbackRate?
v2.2.0
You can use the playbackRate
prop to control the speed of the audio. 1
is the default and means regular speed, 0.5
slows down the audio so it's twice as long and 2
speeds up the audio so it's twice as fast.
While Remotion doesn't limit the range of possible playback speeds, in development mode the HTMLMediaElement.playbackRate
API is used which throws errors on extreme values. At the time of writing, Google Chrome throws an exception if the playback rate is below 0.0625
or above 16
.
tsx
import {AbsoluteFill ,Audio ,staticFile } from 'remotion';export constMyVideo = () => {return (<AbsoluteFill ><Audio src ={staticFile ('audio.mp3')}playbackRate ={2} /></AbsoluteFill >);};
muted?
v2.0.0
The muted
prop will be respected. It will lead to no audio being played while still keeping the audio tag mounted. It's value may change over time, for example to only mute a certain section of the audio.
tsx
import {AbsoluteFill ,Audio ,staticFile ,useCurrentFrame } from 'remotion';export constMyVideo = () => {constframe =useCurrentFrame ();return (<AbsoluteFill ><Audio src ={staticFile ('audio.mp3')}muted ={frame < 30} /></AbsoluteFill >);};
name?
v4.0.71
optional
A name and that will be shown as the label of the sequence in the timeline of the Remotion Studio. This property is purely for helping you keep track of items in the timeline.
loop?
v3.2.29
You can use the loop
prop to loop audio.
tsx
import {AbsoluteFill ,Audio ,staticFile ,useCurrentFrame } from 'remotion';export constMyVideo = () => {constframe =useCurrentFrame ();return (<AbsoluteFill ><Audio loop src ={staticFile ('audio.mp3')} /></AbsoluteFill >);};
toneFrequency?
v4.0.47
Adjust the pitch of the audio - will only be applied during rendering.
Accepts a number between 0.01
and 2
, where 1
represents the original pitch. Values less than 1
will decrease the pitch, while values greater than 1
will increase it.
A toneFrequency
of 0.5 would lower the pitch by half, and a toneFrequency
of 1.5
would increase the pitch by 50%.
acceptableTimeShiftInSeconds?
v3.2.42
In the Remotion Studio or in the Remotion Player, Remotion will seek the audio if it gets too much out of sync with Remotion's internal time - be it due to the audio loading or the page being too slow to keep up in real-time. By default, a seek is triggered if 0.45
seconds of time shift is encountered. Using this prop, you can customize the threshold.
pauseWhenBuffering?
v4.0.111
If set to true
and the audio is buffering, the Player will enter into the native buffering state. The default is false
, but will become true
in Remotion 5.0.
showInTimeline?
v4.0.122
If set to false
, no layer will be shown in the timeline of the Remotion Studio. The default is true
.
delayRenderTimeoutInMilliseconds?
v4.0.140
Customize the timeout of the delayRender()
call that this component makes.
delayRenderRetries?
v4.0.140
Customize the number of retries of the delayRender()
call that this component makes.
useWebAudioApi?
v4.0.306
Enable the Web Audio API for the audio tag.
allowAmplificationDuringRender?
v3.3.17
allowAmplificationDuringRender?
v3.3.17Deprecated since v4.0.279: This prop intended to opt into setting the volume to a value higher than one, even though it would only apply during render.
The option does not make sense anymore, because it is now possible to set the volume higher than 1
.
To prevent synthetic amplification, set a volume not higher than 1.