Skip to main content

<音频>

使用此组件,您可以向您的视频添加音频。所有Chromium支持的音频格式都受到该组件的支持。

API

src

将音频文件放入 public/ 文件夹 并使用 staticFile() 来引用它。

tsx
import { AbsoluteFill, Audio, staticFile } from "remotion";
 
export const MyVideo = () => {
return (
<AbsoluteFill>
<Audio src={staticFile("audio.mp3")} />
</AbsoluteFill>
);
};
tsx
import { AbsoluteFill, Audio, staticFile } from "remotion";
 
export const MyVideo = () => {
return (
<AbsoluteFill>
<Audio src={staticFile("audio.mp3")} />
</AbsoluteFill>
);
};

volume

该组件还接受一个 volume 属性,允许您控制音频的整体音量或逐帧音量。阅读 使用音频 页面以了解更多信息。

设置静态音量
tsx
import { AbsoluteFill, Audio, staticFile } from "remotion";
 
export const MyVideo = () => {
return (
<AbsoluteFill>
<Audio volume={0.5} src={staticFile("background.mp3")} />
</AbsoluteFill>
);
};
设置静态音量
tsx
import { AbsoluteFill, Audio, staticFile } from "remotion";
 
export const MyVideo = () => {
return (
<AbsoluteFill>
<Audio volume={0.5} src={staticFile("background.mp3")} />
</AbsoluteFill>
);
};
随时间改变音量
tsx
import { AbsoluteFill, Audio, interpolate, staticFile } from "remotion";
 
export const MyVideo = () => {
return (
<AbsoluteFill>
<Audio
volume={(f) =>
interpolate(f, [0, 30], [0, 1], { extrapolateLeft: "clamp" })
}
src={staticFile("voice.mp3")}
/>
</AbsoluteFill>
);
};
随时间改变音量
tsx
import { AbsoluteFill, Audio, interpolate, staticFile } from "remotion";
 
export const MyVideo = () => {
return (
<AbsoluteFill>
<Audio
volume={(f) =>
interpolate(f, [0, 30], [0, 1], { extrapolateLeft: "clamp" })
}
src={staticFile("voice.mp3")}
/>
</AbsoluteFill>
);
};
note

在 iOS Safari 上,无法精细地更改媒体标签的音量。
浏览器只会尊重值 01

loopVolumeCurveBehaviorv4.0.142

控制在使用 volume 回调函数并添加 loop 属性时返回的 frame

可以是 "repeat"(默认值,在每次迭代时从 0 开始)或 "extend"(保持增加帧)。

startFrom / endAt

<音频> 还有两个更多的辅助属性可供使用:

  • startFrom 将在开头删除音频的一部分
  • endAt 将在结尾删除音频的一部分

在以下示例中,我们假设合成的 fps30

通过传递 startFrom={60},播放立即开始,但音频的前 2 秒将被裁剪掉。
通过传递 endAt={120},文件中 4 秒标记后的任何音频都将被裁剪掉。

音频将播放从 00:02:0000:04:00 的范围,意味着音频将播放 2 秒。

tsx
import { AbsoluteFill, Audio, staticFile } from "remotion";
 
export const MyVideo = () => {
return (
<AbsoluteFill>
<Audio src={staticFile("audio.mp3")} startFrom={60} endAt={120} />
</AbsoluteFill>
);
};
tsx
import { AbsoluteFill, Audio, staticFile } from "remotion";
 
export const MyVideo = () => {
return (
<AbsoluteFill>
<Audio src={staticFile("audio.mp3")} startFrom={60} endAt={120} />
</AbsoluteFill>
);
};

playbackRatev2.2.0

您可以使用 playbackRate 属性来控制音频的速度。1 是默认值,表示正常速度,0.5 会减慢音频速度,使其变为原来的两倍长,2 会加快音频速度,使其变为原来的两倍快。

虽然 Remotion 不限制可能的播放速度范围,在开发模式下使用 HTMLMediaElement.playbackRate API,当播放速度超出极端值时会抛出错误。在撰写本文时,Google Chrome 在播放速度低于 0.0625 或高于 16 时会抛出异常。

tsx
import { AbsoluteFill, Audio, staticFile } from "remotion";
 
export const MyVideo = () => {
return (
<AbsoluteFill>
<Audio src={staticFile("audio.mp3")} playbackRate={2} />
</AbsoluteFill>
);
};
tsx
import { AbsoluteFill, Audio, staticFile } from "remotion";
 
export const MyVideo = () => {
return (
<AbsoluteFill>
<Audio src={staticFile("audio.mp3")} playbackRate={2} />
</AbsoluteFill>
);
};

mutedv2.0.0

muted 属性将被尊重。这将导致不播放任何音频,同时保持音频标签已挂载。其值可能随时间而变化,例如仅静音音频的某个特定部分。

tsx
import { AbsoluteFill, Audio, staticFile, useCurrentFrame } from "remotion";
 
export const MyVideo = () => {
const frame = useCurrentFrame();
return (
<AbsoluteFill>
<Audio src={staticFile("audio.mp3")} muted={frame < 30} />
</AbsoluteFill>
);
};
tsx
import { AbsoluteFill, Audio, staticFile, useCurrentFrame } from "remotion";
 
export const MyVideo = () => {
const frame = useCurrentFrame();
return (
<AbsoluteFill>
<Audio src={staticFile("audio.mp3")} muted={frame < 30} />
</AbsoluteFill>
);
};

namev4.0.71

可选

一个名称,将显示为 Remotion Studio 时间轴中序列的标签。此属性仅用于帮助您在时间轴中跟踪项目。

loopv3.2.29

您可以使用 loop 属性来循环播放音频。

tsx
import { AbsoluteFill, Audio, staticFile, useCurrentFrame } from "remotion";
 
export const MyVideo = () => {
const frame = useCurrentFrame();
return (
<AbsoluteFill>
<Audio loop src={staticFile("audio.mp3")} />
</AbsoluteFill>
);
};
tsx
import { AbsoluteFill, Audio, staticFile, useCurrentFrame } from "remotion";
 
export const MyVideo = () => {
const frame = useCurrentFrame();
return (
<AbsoluteFill>
<Audio loop src={staticFile("audio.mp3")} />
</AbsoluteFill>
);
};

toneFrequencyv4.0.47

调整音频的音调 - 仅在渲染期间应用。

接受一个介于 0.012 之间的数字,其中 1 代表原始音调。小于 1 的值将降低音调,而大于 1 的值将增加音调。

toneFrequency 为 0.5 会将音调降低一半,而 toneFrequency1.5 会将音调提高 50%。

acceptableTimeShiftInSecondsv3.2.42

Remotion StudioRemotion Player 中,如果音频与 Remotion 的内部时间相差太大 - 无论是由于音频加载还是页面无法实时跟上 - Remotion 将寻找音频。默认情况下,如果遇到 0.45 秒的时间偏移,将触发一次寻找。使用此属性,您可以自定义阈值。

allowAmplificationDuringRenderv3.3.17

使 volume 大于 1 的值在渲染期间产生放大效果。 在 Remotion Studio 中,音量将限制为 1,因为浏览器无法放大音频。

pauseWhenBufferingv4.0.111

如果设置为 true 并且音频正在缓冲,播放器将进入本机缓冲状态。默认值为 false,但在 Remotion 5.0 中将变为 true

showInTimelinev4.0.122

如果设置为 false,则不会在 Remotion Studio 的时间轴中显示任何图层。默认值为 true

delayRenderTimeoutInMillisecondsv4.0.140

自定义此组件调用的 delayRender()超时

delayRenderRetriesv4.0.140

自定义此组件调用的 delayRender()重试次数

另请参阅