音訊處理的運算順序

自 Remotion v4.0.141 起，對於 <Video>、<Audio>、<Html5Audio>、<Html5Video> 和 <OffthreadVideo>，運算順序保證如下：

1. 剪裁音訊（使用 trimBefore）
2. 偏移音訊（透過放入 <Sequence> 中）
3. 延展音訊（透過加入 playbackRate）

運算順序詳細說明

步驟一：剪裁（Trim）

trimBefore 和 trimAfter 首先被套用，決定使用音訊的哪個片段。

步驟二：偏移（Offset）

接著，<Sequence> 的 from 屬性決定音訊在時間軸上的起始位置。

步驟三：延展（Stretch）

最後，playbackRate 調整音訊的播放速度，但不影響起始位置和偏移量。

具體範例

以一個 30 FPS、共 60 幀的合成為例：

步驟分解

步驟 1： <Audio> 標籤的 trimBefore 值為 45。音訊的前 1.5 秒會被剪掉（45 幀 ÷ 30fps = 1.5 秒）。

步驟 2： <Audio> 標籤位於 from={30} 的 <Sequence> 中。音訊只會從時間軸的第 1.0 秒（第 30 幀）開始，對應音訊中的 1.5 秒位置。

步驟 3： <Audio> 的 playbackRate 為 2。音訊以 2 倍速播放，但起始位置和偏移量不受影響。

步驟 4： 合成共 60 幀，所以音訊必須在 3.5 秒標記處停止：

(合成總幀數 - 偏移量) × 播放速率 + 起始幀
(60 - 30) × 2 + 45 = 第 105 幀，即 3.5 秒標記

結果： 音訊的 1.5 秒至 3.5 秒片段被截取出來，以 2 倍速播放於 Remotion 時間軸的第 30 至 59 幀之間。

程式碼範例

import {AbsoluteFill, Audio, Sequence, staticFile} from 'remotion';
 
export const AudioOrderExample = () => {
  return (
    <AbsoluteFill>
      {/*
        運算順序：
        1. trimBefore={45} → 跳過前 45 幀（1.5 秒）的音訊
        2. <Sequence from={30}> → 音訊從時間軸第 30 幀開始播放
        3. playbackRate={2} → 音訊以 2 倍速播放
      */}
      <Sequence from={30}>
        <Audio
          src={staticFile('audio.mp3')}
          trimBefore={45}
          playbackRate={2}
        />
      </Sequence>
    </AbsoluteFill>
  );
};

計算公式

理解音訊結束位置的公式：

音訊結束幀 = (合成總幀數 - Sequence 起始幀) × playbackRate + trimBefore

或以時間表示：

音訊結束時間 = (合成總秒數 - Sequence 偏移秒數) × playbackRate + trimBefore 秒數

互動示意圖

以下表格展示各步驟對音訊播放的影響（以 30 FPS 為例）：

常見問題

為何 playbackRate 不影響起始偏移？

這是刻意設計的行為。playbackRate 只影響音訊的播放速度，而不改變剪裁點或 <Sequence> 的偏移量。這讓您可以精確控制音訊的起點，同時獨立調整播放速度。

如何計算特定情境下的音訊範圍？

// 計算範例：
// - 合成：30fps，60 幀（2 秒）
// - trimBefore: 0（不剪裁）
// - Sequence from: 0（不偏移）
// - playbackRate: 1.5
 
// 結束幀 = (60 - 0) × 1.5 + 0 = 第 90 幀（3 秒音訊）
// 結論：播放從 0s 開始的 3 秒音訊，壓縮到 2 秒的時間軸內
 
import {AbsoluteFill, Audio, staticFile} from 'remotion';
 
export const SpeedUpAudio = () => {
  return (
    <AbsoluteFill>
      <Audio
        src={staticFile('audio.mp3')}
        playbackRate={1.5}
      />
    </AbsoluteFill>
  );
};

版本要求

:::info 運算順序的保證自 Remotion v4.0.141 起生效。在此版本之前，運算順序可能有所不同。 :::

相關連結

• trimBefore / trimAfter
• playbackRate
• <Sequence>
• <Audio> API 文件
• 剪裁音訊
• 延遲音訊
• 音訊速度