Remotion LabRemotion Lab
›音訊›控制音調

控制音調

使用 toneFrequency 屬性在渲染期間調整音訊的音調高低

:::warning 音調校正目前僅在渲染期間生效。 :::

您可以使用 toneFrequency 屬性來控制渲染期間音訊的音調。

接受的值範圍為 0.01 到 2，其中 1 代表原始音調。小於 1 的值會降低音調，大於 1 的值則會提高音調。

  • toneFrequency 為 0.5 時，音調會降低一半
  • toneFrequency 為 1.5 時，音調會提高 50%

基本範例

MyComp.tsx
import {Html5Audio, staticFile, AbsoluteFill} from 'remotion';
 
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <div>Hello World!</div>
      <Html5Audio src={staticFile('audio.mp3')} toneFrequency={0.8} />
    </AbsoluteFill>
  );
};

在上述範例中，toneFrequency={0.8} 會將音調降低 20%，產生較低沉的聲音效果。

音調值參考

toneFrequency 值效果說明
0.5音調降低一半（低八度）
0.75音調降低 25%
1.0原始音調（無變更）
1.25音調提高 25%
1.5音調提高 50%
2.0音調提高一倍（高八度）

動態音調控制

您可以根據目前幀數動態調整音調，建立音調隨時間變化的效果：

DynamicPitch.tsx
import {Html5Audio, staticFile, AbsoluteFill, useCurrentFrame, interpolate} from 'remotion';
 
export const DynamicPitchComposition = () => {
  const frame = useCurrentFrame();
 
  // 讓音調在 60 幀內從 0.8 線性插值到 1.2
  const toneFrequency = interpolate(frame, [0, 60], [0.8, 1.2], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });
 
  return (
    <AbsoluteFill>
      <Html5Audio
        src={staticFile('audio.mp3')}
        toneFrequency={toneFrequency}
      />
    </AbsoluteFill>
  );
};

注意事項

  • 音調校正僅在渲染時套用，在 Remotion Studio 預覽中無效
  • toneFrequency 屬性僅適用於 <Html5Audio> 元件
  • 音調調整會影響音訊的播放速度感知，但不會改變實際的時間長度

相關連結