Skip to main content

<Html5Audio>

以前叫做 <Audio>

使用此组件，你可以向视频中添加音频。所有 Chrome 支持的音频格式，该组件也支持。

🌐 Using this component, you can add audio to your video. All audio formats which are supported by Chrome are supported by the component.

在客户端渲染中不支持

<Html5Audio> 在 @remotion/web-renderer 中不受支持。请改为使用来自 @remotion/media 的 <Audio>。

应用编程接口​

🌐 API

src​

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

import {AbsoluteFill, Html5Audio, staticFile} from 'remotion';

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

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, Html5Audio, staticFile} from 'remotion';

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

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

默认情况下，支持 0 到 1 之间的音量，在 iOS Safari 中，音量始终为 1。
有关更多信息，请参阅 音量限制。

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

控制在使用 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).

trimBefore? / trimAfter?v4.0.319​

<Html5Audio> 有两个辅助属性可以用来剪辑音频：

  • trimBefore 将移除音频开头（左侧）的一部分
  • trimAfter 将移除音频末尾（右侧）的一部分

在以下示例中，我们假设该组成部分的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.

import {AbsoluteFill, Html5Audio, staticFile} from 'remotion';

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

startFrom? / endAt?​

已弃用

这些属性在 4.0.319 中已重命名为 trimBefore 和 trimAfter。它们将继续有效，但不能与新的属性一起使用。

playbackRate?v2.2.0​

你可以使用 playbackRate 属性来控制音频的播放速度。1 是默认值，表示正常速度，0.5 会放慢音频，使其时长加倍，而 2 会加快音频，使其速度加倍。

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

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

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

import {AbsoluteFill, Html5Audio, staticFile} from 'remotion';

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

不支持倒放视频。

muted?v2.0.0​

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.

import {AbsoluteFill, Html5Audio, staticFile, useCurrentFrame} from 'remotion';

export const MyVideo = () => {
  const frame = useCurrentFrame();
  return (
    <AbsoluteFill>
      <Html5Audio src={staticFile('audio.mp3')} muted={frame < 30} />
    </AbsoluteFill>
  );
};

name?v4.0.71​

一个名称，将显示为 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.

loop?v3.2.29​

你可以使用 loop 属性来循环音频。

🌐 You can use the loop prop to loop audio.

import {AbsoluteFill, Html5Audio, staticFile, useCurrentFrame} from 'remotion';

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

toneFrequency?v4.0.47​

调整音频的音调——仅在渲染时应用。

🌐 Adjust the pitch of the audio - will only be applied during rendering.

接受介于 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%.

audioStreamIndex?v4.0.340​

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

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

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

这个属性仅在渲染期间有效。 浏览器在未启用实验性标志的情况下不支持选择音轨。

不要与音频通道混淆。一个视频可以有多个音频流，每个流可以有多个通道。 例如，多个音频流可以用于为视频添加多种语言。

🌐 Not to be confused with audio channels. A video can have multiple audio streams, each stream can have multiple channels.
Multiple audio streams can be used for example for adding multiple languages to a video.

音频流从零开始索引。

🌐 Audio streams are zero-indexed.

acceptableTimeShiftInSeconds?v3.2.42​

在 Remotion Studio 或 Remotion Player 中，如果音频与 Remotion 的内部时间不同步过多，Remotion 会进行音频搜索——无论是由于音频加载慢，还是页面运行过慢以致无法实时跟上。默认情况下，如果遇到 0.45 秒的时间偏移，就会触发音频搜索。使用此属性，你可以自定义触发阈值。

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

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

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

如果设置为 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?v4.0.140​

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

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

delayRenderRetries?v4.0.140​

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

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

useWebAudioApi?v4.0.306​

为 audio 标签启用 Web Audio API。

🌐 Enable the Web Audio API for the audio tag.

onError?v4.0.326​

处理播放音频时的错误。

🌐 Handle an error playing the audio.

crossOrigin?​

对应 <audio> 元素的 crossOrigin 属性。"anonymous"、"use-credentials" 或 undefined 之一。

🌐 Corresponds to the crossOrigin attribute of the <audio> element. One of "anonymous", "use-credentials" or undefined.

allowAmplificationDuringRender?v3.3.17​

自 v4.0.279 起已弃用：此属性旨在选择将音量设置为高于一的值，即使它仅在渲染期间应用。

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

这个选项不再有意义，因为现在可以将音量设置高于 1。为了防止合成放大，音量不要设置高于 1。

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

兼容性​

🌐 Compatibility

BrowsersEnvironments
Chrome
Firefox
Safari

另请参阅​

🌐 See also

Last updated on