Remotion LabRemotion Lab
›音訊›控制音量

控制音量

使用 volume prop 控制靜態或隨時間變化的音量，並了解 Web Audio API 的進階音量選項。

控制音量

使用 volume prop 來控制音訊音量。最簡單的方式是傳入一個介於 0 到 1 之間的數字。

靜態音量

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

隨時間改變音量

你也可以傳入一個函數，該函數接受幀號並回傳音量值，從而實現隨時間動態變化的音量控制。

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 秒內淡入至全音量。

注意：由於不允許低於 0 的值，需要設定 extrapolateLeft: 'clamp' 選項以確保不會產生負值。

提示：在回呼函數內，f 的值始終從 0 開始（當音訊開始播放時），而非 useCurrentFrame() 的值。

淡入 + 淡出效果

結合兩段 interpolate 可以輕鬆實現淡入與淡出效果：

import { AbsoluteFill, Html5Audio, interpolate, staticFile, useVideoConfig } from 'remotion';
 
export const MyComposition = () => {
  const { fps, durationInFrames } = useVideoConfig();
 
  return (
    <AbsoluteFill>
      <Html5Audio
        src={staticFile('bgm.mp3')}
        volume={(f) => {
          const fadeInDuration = 1 * fps;  // 淡入 1 秒
          const fadeOutStart = durationInFrames - 1 * fps;  // 最後 1 秒淡出
 
          const fadeIn = interpolate(f, [0, fadeInDuration], [0, 1], {
            extrapolateRight: 'clamp',
          });
          const fadeOut = interpolate(f, [fadeOutStart, durationInFrames], [1, 0], {
            extrapolateLeft: 'clamp',
          });
 
          return Math.min(fadeIn, fadeOut);
        }}
      />
    </AbsoluteFill>
  );
};

建議使用回呼函數

最佳實踐：若音量會隨時間變化，優先使用回呼函數而非靜態值。這樣 Remotion 才能在 Studio 中繪製音量曲線，且效能也更佳。

音量限制（v4.0.306）

預設情況下，有兩項音量限制：

  1. 無法將音量設定為高於 1
  2. 在 iOS Safari 上，音量將固定為 1

使用 Web Audio API 突破限制

可透過為 <Html5Audio>、<Html5Video> 和 <OffthreadVideo> 啟用 Web Audio API 來繞過上述限制：

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

注意事項：

  1. 你必須將 crossOrigin prop 設定為 "anonymous"，且音訊來源必須支援 CORS。
  2. 在 Safari 上，無法同時使用 useWebAudioApi 與 playbackRate——若兩者並用，音量設定將被忽略。

完整範例：多軌混音

import { AbsoluteFill, Html5Audio, Sequence, interpolate, staticFile, useVideoConfig } from 'remotion';
 
export const MyComposition = () => {
  const { fps } = useVideoConfig();
 
  return (
    <AbsoluteFill>
      {/* 背景音樂：低音量，淡入 */}
      <Html5Audio
        src={staticFile('bgm.mp3')}
        volume={(f) =>
          interpolate(f, [0, 2 * fps], [0, 0.3], { extrapolateRight: 'clamp' })
        }
      />
 
      {/* 旁白：在第 1 秒開始，音量較高 */}
      <Sequence from={fps}>
        <Html5Audio src={staticFile('narration.mp3')} volume={0.9} />
      </Sequence>
    </AbsoluteFill>
  );
};

另請參閱