Skip to main content

<Audio>

note

这是新 <Audio> 标签的文档。 不要将其与来自 remotion 的旧 <Html5Audio> / <Audio> 标签混淆。

这个组件导入并播放音频，类似于 remotion 中的 <Html5Audio />，但在渲染过程中使用 Mediabunny 而不是 FFmpeg 提取精确音频。

🌐 This component imports and plays audio, similar to <Html5Audio /> from remotion but during rendering, extracts the exact audio using Mediabunny instead of FFmpeg.

示例​

🌐 Example

import {AbsoluteFill, staticFile} from 'remotion';
import {Audio} from '@remotion/media';

export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Audio src={staticFile('audio.mp3')} />
    </AbsoluteFill>
  );
};

你也可以从 URL 加载视频：

🌐 You can load a video from an URL as well:

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Audio src="https://remotion.media/audio.wav" />
    </AbsoluteFill>
  );
};

属性​

🌐 Props

src​

要呈现的音频的 URL。可以是远程 URL，也可以是通过 staticFile() 引用的本地文件。

🌐 The URL of the audio to be rendered. Can be a remote URL or a local file referenced with staticFile().

trimBefore?​

将移除开头（左侧）的一部分音频。

🌐 Will remove a portion of the audio at the beginning (left side).

在以下示例中，我们假设该组成部分的fps是30。

🌐 In the following example, we assume that the fps of the composition is 30.

传入 trimBefore={60} 时，播放将立即开始，但音频的前 2 秒会被剪掉。 传入 trimAfter={120} 时，文件中第 4 秒之后的所有音频将被剪掉。

🌐 By passing trimBefore={60}, the playback starts immediately, but with the first 2 seconds of the audio trimmed away.
By passing trimAfter={120}, any audio after the 4 second mark in the file will be trimmed away.

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

🌐 The audio will play the range from 00:02:00 to 00:04:00, meaning the audio will play for 2 seconds.

有关确切行为，请参见：运算顺序。

🌐 For exact behavior, see: Order of operations.

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Audio src={staticFile('audio.mp3')} trimBefore={60} trimAfter={120} />
    </AbsoluteFill>
  );
};

trimAfter?​

移除音频末端（右侧）的一部分。有关解释，请参见 trimBefore。

🌐 Removes a portion of the audio at the end (right side). See trimBefore for an explanation.

volume?​

允许你控制音频的整体音量或逐帧音量。
阅读关于 使用音频 的页面以了解更多信息。

🌐 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 volume
import {AbsoluteFill, staticFile} from 'remotion';
import {Audio} from '@remotion/media';

export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Audio volume={0.5} src={staticFile('background.mp3')} />
    </AbsoluteFill>
  );
};
Changing the volume over time
import {AbsoluteFill, interpolate, staticFile} from 'remotion';
import {Audio} from '@remotion/media';

export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Audio volume={(f) => interpolate(f, [0, 30], [0, 1], {extrapolateLeft: 'clamp'})} src={staticFile('voice.mp3')} />
    </AbsoluteFill>
  );
};

name?​

一个名称，将显示为 Remotion Studio 时间线中序列的标签。此属性纯粹是为了帮助你在时间线上跟踪项目。

🌐 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.

onError?v4.0.404​

处理音频处理中发生的错误。回调接收一个 Error，并应返回 'fallback' 或 'fail'。

🌐 Handle errors that occur during audio processing. The callback receives an Error and should return either 'fallback' or 'fail'.

  • 返回 'fallback' 以回退到 <Html5Audio>（默认行为）
  • 返回 'fail' 以立即使渲染失败
import {Audio} from '@remotion/media';

export const MyVideo = () => {
  return (
    <Audio
      src={'https://remotion.media/audio.mp3'}
      onError={(error) => {
        console.log('Audio error:', error.message);

        // Return 'fail' to fail the render, or 'fallback' to use <Html5Audio>
        return 'fallback';
      }}
    />
  );
};
note
  • 在客户端渲染中，无论返回值如何，渲染总会失败。
  • 如果你返回 'fallback'，组件将回退到 <Html5Audio>，该组件可能通过 fallbackHtml5AudioProps.onError 具有自己的错误处理。 :::

playbackRate?v4.0.354​

控制音频的速度。1 是默认值，表示正常速度，0.5 会减慢音频，使其长度是原来的两倍，2 会加快音频，使其速度是原来的两倍。

🌐 Controls 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.

Example of a audio playing twice as fast
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Audio playbackRate={2} src={'https://remotion.media/audio.mp3'} />
    </AbsoluteFill>
  );
};
note

不支持将音频倒放。

loop?v3.2.29​

使音频无限循环。

🌐 Makes the audio loop indefinitely.

Example of a looped audio
export const MyComposition = () => {
  return <Audio loop src="https://remotion.media/audio.wav" />;
};

loopVolumeCurveBehavior?v4.0.354​

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

🌐 Controls the frame which is returned when using the volume callback function and adding the loop attribute.

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

🌐 Can be either "repeat" (default, start from 0 on each iteration) or "extend" (keep increasing frames).

muted?​

muted 属性将会被遵守。它将导致没有音频播放，同时仍保持 audio 标签的挂载。它的值可能会随时间变化，例如仅静音音频的某个部分。

🌐 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.

Example of a muted video
export const MyComposition = () => {
  return <Audio muted src="https://remotion.media/audio.wav" />;
};

showInTimeline?​

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

🌐 If set to false, no layer will be shown in the timeline of the Remotion Studio. The default is true.

delayRenderTimeoutInMilliseconds?​

自定义此组件进行的 delayRender() 调用的 超时 设置。

🌐 Customize the timeout of the delayRender() call that this component makes.

delayRenderRetries?​

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

🌐 Customize the number of retries of the delayRender() call that this component makes.

audioStreamIndex?​

选择要使用的音频流。默认是 0。

🌐 Select the audio stream to use. The default is 0.

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Audio audioStreamIndex={1} src={'https://remotion.media/multiple-audio-streams.mov'} />
    </AbsoluteFill>
  );
};

toneFrequency?​

接受介于 0.01 和 2 之间的数字，其中 1 表示原始音高。小于 1 的值会降低音高，而大于 1 的值会提高音高。

🌐 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.

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

🌐 A toneFrequency of 0.5 would lower the pitch by half, and a toneFrequency of 1.5 would increase the pitch by 50%.

该值在视频标签挂载的整个时间内必须保持不变。

🌐 The value must stay the same across the entire time the video tag is mounted.

warning

仅在服务器端渲染中有效。 目前在预览或客户端渲染中无效。

fallbackHtml5AudioProps?​

当发生从 remotion 回退到 <Html5Audio>（fallback to <Html5Audio> from remotion）时，此属性允许你将属性传递给回退的 <Html5Audio> 组件。 这里只需指定 @remotion/media 的 <Audio> 不支持的属性——适用于两个标签的属性会自动转发，无需在此处指定。

🌐 When a fallback to <Html5Audio> from remotion happens, this prop allows you to pass props to the fallback <Html5Audio> component.
Only props that are not supported by <Audio> from @remotion/media need to be specified here - props that apply for both tags will automatically be forwarded and do not need to be specified here.

note

在使用 @remotion/web-renderer 进行客户端渲染时，此属性不起作用，因为无法进行回退。请参阅 在客户端渲染中无法回退。

onError?​

映射到 <Html5Audio /> -> onError

🌐 Maps to <Html5Audio /> -> onError

useWebAudioApi?​

映射到 <Html5Audio /> -> useWebAudioApi

🌐 Maps to <Html5Audio /> -> useWebAudioApi

acceptableTimeShiftInSeconds?​

映射到 <Html5Audio /> -> acceptableTimeShiftInSeconds

🌐 Maps to <Html5Audio /> -> acceptableTimeShiftInSeconds

pauseWhenBuffering?​

映射到 <Html5Audio /> -> pauseWhenBuffering

🌐 Maps to <Html5Audio /> -> pauseWhenBuffering

crossOrigin?​

映射到 <Html5Audio /> -> crossOrigin

🌐 Maps to <Html5Audio /> -> crossOrigin

disallowFallbackToHtml5Audio?v3.0.356​

默认情况下，如果无法使用此标签嵌入音频，将尝试从 remotion 回退到 <Html5Audio>。

🌐 By default, if the audio cannot be embedded using this tag, a fallback to <Html5Audio> from remotion will be attempted.

传递这个属性以禁用回退，而是让渲染失败。

🌐 Pass this prop to disable the fallback and fail the render instead.

note

在使用 @remotion/web-renderer 进行客户端渲染时，如果音频无法嵌入，回退是不可能的，渲染将始终失败。请参见 客户端渲染中回退是不可能的。

另请参阅​

🌐 See also

Last updated on