Remotion LabRemotion Lab
›音訊›靜音音訊

靜音音訊

使用 muted prop 在特定幀範圍內靜音音訊，並可隨時間動態切換靜音狀態。

靜音音訊

你可以將 muted prop 傳入 <Audio>、<Video>、<OffthreadVideo>、<Html5Audio> 和 <Html5Video>，並且可以隨時間動態改變其值。

當 muted 為 true 時，該時間點的音訊將被省略（靜音），但音訊元件仍保持掛載狀態。

靜音特定時間段

在以下範例中，我們將第 2 秒到第 4 秒之間的音訊靜音：

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

靜音的行為說明

muted prop 與 volume={0} 的主要差異：

特性muted={true}volume={0}
渲染輸出中的音訊完全省略靜音但存在
音訊元件狀態保持掛載保持掛載
建議用途靜音特定段落實現淡入淡出

開場靜音（等到某個時間點才開始播放聲音）

import { AbsoluteFill, Html5Audio, staticFile, useCurrentFrame, useVideoConfig } from 'remotion';
 
export const MyComposition = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
 
  // 前 3 秒靜音，3 秒後才有聲音
  const isMuted = frame < 3 * fps;
 
  return (
    <AbsoluteFill>
      <Html5Audio
        src={staticFile('audio.mp3')}
        muted={isMuted}
      />
    </AbsoluteFill>
  );
};

根據條件切換靜音

muted 接受任何布林運算式，讓你可以根據業務邏輯靈活控制靜音狀態：

import { AbsoluteFill, Html5Audio, staticFile, useCurrentFrame, useVideoConfig } from 'remotion';
 
export const MyComposition = ({ showSubtitle }: { showSubtitle: boolean }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
 
  return (
    <AbsoluteFill>
      {/* 背景音樂：在字幕出現時降低音量，但不靜音 */}
      <Html5Audio
        src={staticFile('bgm.mp3')}
        volume={showSubtitle ? 0.2 : 0.8}
      />
 
      {/* 旁白：只在特定幀段內有聲音 */}
      <Html5Audio
        src={staticFile('narration.mp3')}
        muted={frame < 2 * fps || frame > 8 * fps}
      />
    </AbsoluteFill>
  );
};

交替靜音（製作閃爍音效）

import { AbsoluteFill, Html5Audio, staticFile, useCurrentFrame } from 'remotion';
 
export const MyComposition = () => {
  const frame = useCurrentFrame();
 
  // 每 30 幀交替靜音/非靜音（製造節拍閃爍效果）
  const isMuted = Math.floor(frame / 30) % 2 === 1;
 
  return (
    <AbsoluteFill>
      <Html5Audio
        src={staticFile('beat.mp3')}
        muted={isMuted}
      />
    </AbsoluteFill>
  );
};

另請參閱