音訊進階 - RemotionLab

動態音量

volume 可以是函數，根據幀數動態調整：

import { Audio, staticFile, interpolate } from "remotion";
 
<Audio
  src={staticFile("bgm.mp3")}
  volume={(f) =>
    interpolate(f, [0, 30], [0, 1], {
      extrapolateRight: "clamp",
    })
  }
/>

前 30 幀（1 秒）從靜音淡入到全音量。

淡入 + 淡出

<Audio
  src={staticFile("bgm.mp3")}
  volume={(f) => {
    // 假設影片總共 300 幀
    const fadeIn = interpolate(f, [0, 30], [0, 1], {
      extrapolateRight: "clamp",
    });
    const fadeOut = interpolate(f, [270, 300], [1, 0], {
      extrapolateLeft: "clamp",
    });
    return fadeIn * fadeOut;
  }}
/>

多軌音訊

同時播放多個音訊，就像音軌混音：

<AbsoluteFill>
  {/* 背景音樂 */}
  <Audio src={staticFile("bgm.mp3")} volume={0.3} />
 
  {/* 旁白 */}
  <Sequence from={30}>
    <Audio src={staticFile("narration.mp3")} volume={0.9} />
  </Sequence>
 
  {/* 音效 */}
  <Sequence from={60} durationInFrames={30}>
    <Audio src={staticFile("sfx-whoosh.mp3")} volume={0.5} />
  </Sequence>
 
  {/* 影片內容 */}
  <VideoContent />
</AbsoluteFill>

音訊裁切

跟影片一樣，用 startFrom 裁切：

<Audio
  src={staticFile("song.mp3")}
  startFrom={90}   // 從第 3 秒開始
  endAt={270}      // 到第 9 秒結束
/>

播放速度

<Audio
  src={staticFile("narration.mp3")}
  playbackRate={1.5} // 1.5 倍速
/>

音訊視覺化

用 @remotion/media-utils 取得音訊波形資料：

import { useCurrentFrame, useVideoConfig } from "remotion";
import {
  getAudioData,
  useAudioData,
  visualizeAudio,
} from "@remotion/media-utils";
 
export const AudioViz: React.FC<{ src: string }> = ({ src }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const audioData = useAudioData(src);
 
  if (!audioData) return null;
 
  const visualization = visualizeAudio({
    fps,
    frame,
    audioData,
    numberOfSamples: 64,
  });
 
  return (
    <div style={{ display: "flex", alignItems: "flex-end", gap: 2, height: 200 }}>
      {visualization.map((v, i) => (
        <div
          key={i}
          style={{
            width: 8,
            height: `${v * 100}%`,
            backgroundColor: "#6366f1",
            borderRadius: 4,
          }}
        />
      ))}
    </div>
  );
};

安裝：

npm install @remotion/media-utils

小結

volume 函數實現動態音量和淡入淡出
多個 <Audio> 元件就是多軌混音
startFrom / playbackRate 控制裁切和速度
@remotion/media-utils 提供音訊視覺化工具