音效 - RemotionLab

您可以使用 <Audio> 標籤在 Remotion 影片中加入音效。

使用 `@remotion/sfx`

@remotion/sfx 套件提供一系列現成可用的音效：

MyComp.tsx

import {whoosh, whip} from '@remotion/sfx';
import {Audio, Sequence} from 'remotion';
 
const MyVideo = () => {
  return (
    <>
      <Sequence from={0} durationInFrames={30}>
        <Audio src={whip} />
      </Sequence>
      <Sequence from={30} durationInFrames={30}>
        <Audio src={whoosh} />
      </Sequence>
    </>
  );
};

請參閱完整可用音效列表。

安裝 `@remotion/sfx`

npm install @remotion/sfx

或使用 yarn：

yarn add @remotion/sfx

直接使用 CDN

您也可以不安裝套件，直接使用 remotion.media CDN URL：

MyComp.tsx

import {Audio} from 'remotion';
 
const MyVideo = () => {
  return <Audio src="https://remotion.media/whoosh.wav" />;
};

實際應用範例

按鈕點擊音效

ClickEffect.tsx

import {click} from '@remotion/sfx';
import {AbsoluteFill, Audio, Sequence, useCurrentFrame} from 'remotion';
 
export const ClickEffectComposition = () => {
  // 在第 15 幀播放點擊音效
  const clickFrame = 15;
 
  return (
    <AbsoluteFill>
      <Sequence from={clickFrame} durationInFrames={30}>
        <Audio src={click} volume={0.8} />
      </Sequence>
    </AbsoluteFill>
  );
};

多個音效組合

MultiSfx.tsx

import {whoosh, whip, pop} from '@remotion/sfx';
import {AbsoluteFill, Audio, Sequence} from 'remotion';
 
export const MultiSfxComposition = () => {
  return (
    <AbsoluteFill>
      {/* 開場嗖聲 */}
      <Sequence from={0} durationInFrames={30}>
        <Audio src={whoosh} volume={1.0} />
      </Sequence>
 
      {/* 中段鞭打聲 */}
      <Sequence from={30} durationInFrames={20}>
        <Audio src={whip} volume={0.9} />
      </Sequence>
 
      {/* 結尾爆破聲 */}
      <Sequence from={60} durationInFrames={30}>
        <Audio src={pop} volume={1.0} />
      </Sequence>
    </AbsoluteFill>
  );
};

根據動畫觸發音效

AnimatedSfx.tsx

import {whoosh} from '@remotion/sfx';
import {AbsoluteFill, Audio, Sequence, spring, useCurrentFrame, useVideoConfig} from 'remotion';
 
export const AnimatedWithSfx = () => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();
 
  // 元素飛入動畫
  const slideIn = spring({
    fps,
    frame,
    config: {damping: 200},
    from: -500,
    to: 0,
  });
 
  return (
    <AbsoluteFill style={{backgroundColor: '#fff'}}>
      {/* 飛入時同步播放音效 */}
      <Sequence from={0} durationInFrames={30}>
        <Audio src={whoosh} />
      </Sequence>
 
      <div
        style={{
          transform: `translateX(${slideIn}px)`,
          width: 200,
          height: 200,
          backgroundColor: 'blue',
        }}
      />
    </AbsoluteFill>
  );
};

尋找更多音效資源

以下是免費音效資源的好去處：

freesound.org — 大型社群驅動的音效庫，許多 CC0 授權音效
kenney.nl — 高品質遊戲音效素材，全部 CC0 授權
soundcn.xyz — 精選 UI 及互動音效集合
ElevenLabs — 透過文字描述生成音效

支援的音效格式

Remotion 支援以下音效格式：

格式	副檔名	說明
MP3	`.mp3`	最廣泛支援的有損壓縮格式
WAV	`.wav`	無損格式，檔案較大但音質最佳
AAC	`.aac`	現代有損壓縮格式
OGG	`.ogg`	開源有損壓縮格式

音效控制技巧

控制音量

<Audio src={whoosh} volume={0.5} /> {/* 50% 音量 */}

音量隨時間變化

FadeOutSfx.tsx

import {whoosh} from '@remotion/sfx';
import {Audio, Sequence, useCurrentFrame, interpolate} from 'remotion';
 
export const FadeOutSfx = () => {
  const frame = useCurrentFrame();
 
  // 音效在 30 幀內從全音量淡出
  const volume = interpolate(frame, [0, 30], [1, 0], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });
 
  return (
    <Sequence from={0} durationInFrames={30}>
      <Audio src={whoosh} volume={volume} />
    </Sequence>
  );
};

貢獻新音效

想要新增音效到 @remotion/sfx 套件嗎？請參閱貢獻指南。

使用 @remotion/sfx

安裝 @remotion/sfx