Skip to main content

控制音量

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

🌐 You can use the volume prop to control the volume.

最简单的方法是传递一个介于 0 和 1 之间的数字。

🌐 The simplest way is to pass a number between 0 and 1.

MyComp.tsx
import {Html5Audio, staticFile, AbsoluteFill} from 'remotion';

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <div>Hello World!</div>
      <Html5Audio src={staticFile('audio.mp3')} volume={0.5} />
    </AbsoluteFill>
  );
};

随时间变化的音量​

🌐 Changing volume over time

你也可以通过传入一个函数来随时间改变音量，该函数接收帧编号并返回音量。

🌐 You can also change volume over time by passing in a function that takes a frame number and returns the volume.

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

export const MyComposition = () => {
  const {fps} = useVideoConfig();

  return (
    <AbsoluteFill>
      <Html5Audio src={staticFile('audio.mp3')} volume={(f) => interpolate(f, [0, 1 * fps], [0, 1], {extrapolateLeft: 'clamp'})} />
    </AbsoluteFill>
  );
};

在此示例中，我们使用 interpolate() 函数在 1 秒内淡入音频。

🌐 In this example we are using the interpolate() function to fade the audio in over 1 second.

请注意，因为不允许小于 0 的值，我们需要设置 extrapolateLeft: 'clamp' 选项以确保没有负值。

🌐 Note that because values below 0 are not allowed, we need to set the extrapolateLeft: 'clamp' option to ensure no negative values.

在回调函数内部，当音频开始播放时，f 的值总是从 0 开始。
它与 useCurrentFrame() 的值不同。

🌐 Inside the callback function, the value of f starts always 0 when the audio begins to play.
It is not the same as the value of useCurrentFrame().

如果音量正在变化，建议使用回调函数。这将使 Remotion 能够在 Studio 中绘制音量曲线，并且性能更高。

🌐 Prefer using a callback function if the volume is changing. This will enable Remotion to draw a volume curve in the Studio and is more performant.

限制v4.0.306​

🌐 Limitationsv4.0.306

默认情况下，你将面临关于音量的两个限制：

🌐 By default, you'll face 2 limitations by default regarding volume:

1
 音量无法设置为高于1的值。
2
 在 iOS Safari 上，音量将被设置为1。

你可以通过为 <Html5Audio>、<Html5Video> 和 <OffthreadVideo> 标签启用 Web Audio API 来解决这些限制。


<Html5Audio src="https://remotion.media/audio.wav" volume={2} useWebAudioApi crossOrigin="anonymous" />;

然而，这有两个警告：

🌐 However, this comes with two caveats:

你必须将 crossOrigin 属性设置为 anonymous，并且音频必须支持 CORS。

在 Safari 上，你不能将其与 playbackRate 结合使用。如果使用，音量将被忽略。


Last updated on