<音频>

使用此组件，您可以向您的视频添加音频。所有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 上，无法精细地更改媒体标签的音量。
浏览器只会尊重值 0 和 1。

`loopVolumeCurveBehavior`v4.0.142

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

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

`startFrom` / `endAt`

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

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

在以下示例中，我们假设合成的 fps 是 30。

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

音频将播放从 00:02:00 到 00: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>
  );
};

`playbackRate`v2.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>
  );
};

`muted`v2.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>
  );
};

`name`v4.0.71

可选

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

`loop`v3.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>
  );
};

`toneFrequency`v4.0.47

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

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

toneFrequency 为 0.5 会将音调降低一半，而 toneFrequency 为 1.5 会将音调提高 50%。

`acceptableTimeShiftInSeconds`v3.2.42

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

`allowAmplificationDuringRender`v3.3.17

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

`pauseWhenBuffering`v4.0.111

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

`showInTimeline`v4.0.122

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

`delayRenderTimeoutInMilliseconds`v4.0.140

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

`delayRenderRetries`v4.0.140

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

另请参阅

CONTRIBUTORS

JonnyBurger

Implementation

evoxf1

toneFrequency 属性

API​

src​

volume​

loopVolumeCurveBehaviorv4.0.142​

startFrom / endAt​

playbackRatev2.2.0​

mutedv2.0.0​

namev4.0.71​

loopv3.2.29​

toneFrequencyv4.0.47​

acceptableTimeShiftInSecondsv3.2.42​

allowAmplificationDuringRenderv3.3.17​

pauseWhenBufferingv4.0.111​

showInTimelinev4.0.122​

delayRenderTimeoutInMillisecondsv4.0.140​

delayRenderRetriesv4.0.140​

另请参阅​

API