使用音频

导入音频

将音频文件放入 public/ 文件夹并使用 staticFile() 来引用它。
在组件中添加一个 <Audio/> 标签来为其添加声音。

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

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

您也可以通过传递 URL 来添加远程音频：

tsx
import { AbsoluteFill, Audio } from "remotion";
 
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Audio src="https://example.com/audio.mp3" />
    </AbsoluteFill>
  );
};

tsx
import { AbsoluteFill, Audio } from "remotion";
 
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Audio src="https://example.com/audio.mp3" />
    </AbsoluteFill>
  );
};

默认情况下，音频将从开头播放，音量和长度都为最大值。您可以通过添加更多的音频标签来混合多个音轨。

剪切或修剪音频

<Audio /> 标签支持 startFrom 和 endAt 属性。在下面的示例中，我们假设合成的 fps 为 30。

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

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

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

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

延迟音频

使用带有正值 from 的 <Sequence> 来延迟音频的播放。在下面的示例中，音频将在 100 帧后开始播放（从开头）。

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

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

控制音量

您可以使用 volume 属性来控制音量。

最简单的方法是传递一个介于 0 和 1 之间的数字。1 是最大音量，0 会静音音频。

tsx
import { Audio } from "remotion";
import audio from "./audio.mp3";
 
export const MyComposition = () => {
  return (
    <div>
      <div>Hello World!</div>
      <Audio src={audio} volume={0.5} />
    </div>
  );
};

tsx
import { Audio } from "remotion";
import audio from "./audio.mp3";
 
export const MyComposition = () => {
  return (
    <div>
      <div>Hello World!</div>
      <Audio src={audio} volume={0.5} />
    </div>
  );
};

您还可以通过传递一个接受帧数并返回音量的函数来随时间改变音量。

tsx
import { AbsoluteFill, Audio, interpolate, staticFile } from "remotion";
 
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Audio
        src={staticFile("audio.mp3")}
        volume={(f) =>
          interpolate(f, [0, 30], [0, 1], { extrapolateLeft: "clamp" })
        }
      />
    </AbsoluteFill>
  );
};

tsx
import { AbsoluteFill, Audio, interpolate, staticFile } from "remotion";
 
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Audio
        src={staticFile("audio.mp3")}
        volume={(f) =>
          interpolate(f, [0, 30], [0, 1], { extrapolateLeft: "clamp" })
        }
      />
    </AbsoluteFill>
  );
};

在这个示例中，我们使用 interpolate() 函数在 30 帧内淡入音频。请注意，由于不允许负值，我们需要设置 extrapolateLeft: 'clamp' 选项以确保没有负值。

在回调函数中，正在播放音频的第一个帧被标记为0，不管useCurrentFrame()的值是多少。

如果音量在变化，请优先使用回调函数。这将使 Remotion 能够在时间轴上绘制音量曲线，并且性能更好。

note

当使用<Player>时，请注意 Mobile Safari 不支持volume属性。音频混音可能无法按预期播放。

`muted` 属性

您可以传入muted，它可能会随时间变化。当muted为 true 时，音频将在那个时间被省略。在下面的示例中，我们在第 40 帧和第 60 帧之间将音轨静音。

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

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

使用 `<Video />` 标签中的音频

来自<Video />和<OffthreadVideo />标签中的音频也包含在输出中。您可以以相同的方式使用startFrom, endAt、volume和muted属性。

控制播放速度

v2.2

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

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

音频可视化

您可以获取音频数据并基于此创建可视化效果。有关更多信息，请参阅页面音频可视化。

仅渲染音频

支持导出为 mp3、aac 和 wav：

CLI
renderMedia()
Lambda

通过 CLI 仅渲染音频，导出时需指定扩展名：

npx remotion render src/index.ts my-comp out/audio.mp3

npx remotion render src/index.ts my-comp out/audio.mp3

或者使用 --codec 标志自动选择一个良好的输出文件名：

npx remotion render src/index.ts my-comp --codec=mp3

npx remotion render src/index.ts my-comp --codec=mp3

通过 Node.JS 仅渲染音频，使用 renderMedia() 并将 codec 设置为音频编解码器。

tsx
await renderMedia({
  composition,
  serveUrl: bundleLocation,
  codec: "mp3",
  outputLocation,
  inputProps,
});

tsx
await renderMedia({
  composition,
  serveUrl: bundleLocation,
  codec: "mp3",
  outputLocation,
  inputProps,
});

通过 Lambda 仅渲染音频，使用 renderMediaOnLambda() 并将 codec 设置为音频编解码器，将 imageFormat 设置为 none。

tsx
const { bucketName, renderId } = await renderMediaOnLambda({
  region: "us-east-1",
  functionName: "remotion-render-bds9aab",
  composition: "MyVideo",
  framesPerLambda: 20,
  serveUrl:
    "https://remotionlambda-qg35eyp1s1.s3.eu-central-1.amazonaws.com/sites/bf2jrbfkw",
  inputProps: {},
  codec: "mp3",
  imageFormat: "none",
  maxRetries: 1,
  privacy: "public",
});

tsx
const { bucketName, renderId } = await renderMediaOnLambda({
  region: "us-east-1",
  functionName: "remotion-render-bds9aab",
  composition: "MyVideo",
  framesPerLambda: 20,
  serveUrl:
    "https://remotionlambda-qg35eyp1s1.s3.eu-central-1.amazonaws.com/sites/bf2jrbfkw",
  inputProps: {},
  codec: "mp3",
  imageFormat: "none",
  maxRetries: 1,
  privacy: "public",
});

通过 Lambda CLI 渲染，使用 npx remotion lambda render 命令并传递 --codec 标志：

npx remotion lambda render --codec=mp3 https://remotionlambda-qg35eyp1s1.s3.eu-central-1.amazonaws.com/sites/bf2jrbfkw my-comp

npx remotion lambda render --codec=mp3 https://remotionlambda-qg35eyp1s1.s3.eu-central-1.amazonaws.com/sites/bf2jrbfkw my-comp

操作顺序v4.0.141

在 Remotion v4.0.141 之前，未定义音频操作的应用顺序，预览和渲染中的行为可能有所不同。

自 Remotion v4.0.141 起，操作顺序保证如下：

裁剪音频（使用 startFrom）。
偏移音频（将其放入序列中）。
拉伸音频（通过添加 playbackRate）。

例如，对于一个 30 FPS 的合成，长度为 60 帧：

一个 <Audio> 标签的 startFrom 值为 45。音频的前 1.5 秒被裁剪掉。
<Audio> 标签在从 30 开始的 <Sequence> 中。音频仅在 1.0 秒时间轴标记处的 1.5 秒音频位置开始播放。
<Audio> 具有 playbackRate 为 2。音频加速 2 倍，但起始位置和起始偏移不受影响。
合成为 60 帧长，因此音频必须在第 3.5 秒停止：

(comp_duration - offset) * playback_rate + start_from
(60 - 30) * 2 + 45 => 帧 105 或第 3.5 秒标记
结果：音频的 1.5 秒至 3.5 秒部分被剪切，并以 2 倍速在 Remotion 时间轴的帧 30 到 59 之间播放。

导入音频​

剪切或修剪音频​

延迟音频​

控制音量​

muted 属性​

使用 <Video /> 标签中的音频​

控制播放速度​

音频可视化​

仅渲染音频​

操作顺序v4.0.141​

参见​