Remotion LabRemotion Lab
›音訊›裁切音訊

裁切音訊

使用 trimBefore 和 trimAfter prop 來裁切音訊片段的開頭與結尾。

裁切音訊

<Html5Audio /> 標籤支援 trimBefore 和 trimAfter prop，讓你可以裁切音訊的任意部分。

基本用法

import { AbsoluteFill, Html5Audio, staticFile, useVideoConfig } from 'remotion';
 
export const MyComposition = () => {
  const { fps } = useVideoConfig();
 
  return (
    <AbsoluteFill>
      <Html5Audio
        src={staticFile('audio.mp3')}
        trimBefore={2 * fps}
        trimAfter={4 * fps}
      />
    </AbsoluteFill>
  );
};

以上範例假設 composition 的 fps 為 30：

  • 傳入 trimBefore={2 * fps}（即 60 幀）：音訊將立即開始播放，但前 2 秒的音訊會被裁切掉
  • 傳入 trimAfter={4 * fps}（即 120 幀）：檔案中第 4 秒之後的音訊將被裁切

最終結果是音訊播放 00:02:00 到 00:04:00 之間的範圍，即共播放 2 秒。

裁切行為說明

音訊仍會立即從 composition 的起點開始播放——trimBefore 和 trimAfter 只決定播放音訊檔案的哪個區段，而不會延遲音訊的出現時機。

若要讓音訊在 composition 的稍後時間點才開始播放，請參閱延遲音訊。

精確控制裁切點

你可以直接使用幀數，也可以搭配 useVideoConfig() 的 fps 換算成秒數：

import { AbsoluteFill, Html5Audio, staticFile, useVideoConfig } from 'remotion';
 
export const MyComposition = () => {
  const { fps } = useVideoConfig();
 
  // 從第 5 秒播放到第 10 秒
  const startSecond = 5;
  const endSecond = 10;
 
  return (
    <AbsoluteFill>
      <Html5Audio
        src={staticFile('long-audio.mp3')}
        trimBefore={startSecond * fps}
        trimAfter={endSecond * fps}
      />
    </AbsoluteFill>
  );
};

舊版 prop（已棄用）

你也可以使用已棄用的 startFrom 和 endAt prop，但建議改用新的 trimBefore 和 trimAfter。

已棄用：startFrom 和 endAt 在 v4.0.319 中已重新命名為 trimBefore 和 trimAfter。它們目前仍可使用，但不能與新 prop 並用。

// 舊版寫法（不建議使用）
<Html5Audio
  src={staticFile('audio.mp3')}
  startFrom={60}
  endAt={120}
/>
 
// 新版寫法（建議使用）
<Html5Audio
  src={staticFile('audio.mp3')}
  trimBefore={60}
  trimAfter={120}
/>

另請參閱