Remotion LabRemotion Lab
›音訊›延遲音訊

延遲音訊

使用帶有正值 from 屬性的 <Sequence> 來延遲音訊的播放時機。

延遲音訊播放

使用帶有正值 from 屬性的 <Sequence> 來延遲音訊的播放時機。

基本用法

在以下範例中，音訊將在第 100 幀後才開始播放：

import { AbsoluteFill, Html5Audio, Sequence, staticFile } from 'remotion';
 
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Sequence from={100}>
        <Html5Audio src={staticFile('audio.mp3')} />
      </Sequence>
    </AbsoluteFill>
  );
};

用秒數換算幀數

搭配 useVideoConfig() 的 fps，可以用更直覺的秒數來指定延遲時間：

import { AbsoluteFill, Html5Audio, Sequence, staticFile, useVideoConfig } from 'remotion';
 
export const MyComposition = () => {
  const { fps } = useVideoConfig();
 
  return (
    <AbsoluteFill>
      {/* 在第 3 秒才開始播放音訊 */}
      <Sequence from={3 * fps}>
        <Html5Audio src={staticFile('audio.mp3')} />
      </Sequence>
    </AbsoluteFill>
  );
};

多個音訊在不同時間點出現

透過多個 <Sequence>，可以讓不同的音訊軌在不同時間點依序出現：

import { AbsoluteFill, Html5Audio, Sequence, staticFile, useVideoConfig } from 'remotion';
 
export const MyComposition = () => {
  const { fps } = useVideoConfig();
 
  return (
    <AbsoluteFill>
      {/* 背景音樂立即開始 */}
      <Html5Audio src={staticFile('bgm.mp3')} volume={0.3} />
 
      {/* 旁白在第 2 秒開始 */}
      <Sequence from={2 * fps}>
        <Html5Audio src={staticFile('narration.mp3')} />
      </Sequence>
 
      {/* 音效在第 5 秒出現，持續 1 秒 */}
      <Sequence from={5 * fps} durationInFrames={fps}>
        <Html5Audio src={staticFile('sfx.mp3')} />
      </Sequence>
    </AbsoluteFill>
  );
};

<Sequence> 的 durationInFrames prop

你也可以搭配 durationInFrames 來限制音訊僅在特定時間範圍內存在。超出範圍後，音訊元件將被卸載，音訊也會停止播放：

import { AbsoluteFill, Html5Audio, Sequence, staticFile, useVideoConfig } from 'remotion';
 
export const MyComposition = () => {
  const { fps } = useVideoConfig();
 
  return (
    <AbsoluteFill>
      {/* 音訊只在第 2 至第 6 秒播放（共 4 秒） */}
      <Sequence from={2 * fps} durationInFrames={4 * fps}>
        <Html5Audio src={staticFile('audio.mp3')} />
      </Sequence>
    </AbsoluteFill>
  );
};

與裁切的差異

功能用途
<Sequence from={...}>決定音訊何時出現在 composition 中
trimBefore / trimAfter決定播放音訊檔案的哪個區段

兩者可以組合使用——先用 trimBefore / trimAfter 選取音訊片段，再用 <Sequence> 決定該片段何時出現：

import { AbsoluteFill, Html5Audio, Sequence, staticFile, useVideoConfig } from 'remotion';
 
export const MyComposition = () => {
  const { fps } = useVideoConfig();
 
  return (
    <AbsoluteFill>
      {/* 從音訊第 10 秒處擷取 5 秒，並在影片第 3 秒才播放 */}
      <Sequence from={3 * fps}>
        <Html5Audio
          src={staticFile('audio.mp3')}
          trimBefore={10 * fps}
          trimAfter={15 * fps}
        />
      </Sequence>
    </AbsoluteFill>
  );
};

另請參閱