›音訊›匯入音訊

匯入音訊

將音訊檔案放入 public/ 資料夾並使用 staticFile() 引用，或使用遠端 URL 串流音訊。

匯入音訊

將音訊檔案放入 public/ 資料夾，並使用 staticFile() 引用它。在你的元件中加入 <Html5Audio /> 標籤，即可在影片中加入音效。

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

使用遠端音訊

你也可以傳入 URL 來加入遠端音訊：

import { AbsoluteFill, Html5Audio } from 'remotion';
 
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Html5Audio src="https://example.com/audio.mp3" />
    </AbsoluteFill>
  );
};

預設行為

預設情況下，音訊將從頭開始播放、以完整音量播放，並播放至完整長度。

你可以透過加入更多音訊標籤來混合多個音軌，就像音訊混音器一樣：

import { AbsoluteFill, Html5Audio, staticFile } from 'remotion';
 
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      {/* 背景音樂 */}
      <Html5Audio src={staticFile('bgm.mp3')} volume={0.3} />
      {/* 旁白 */}
      <Html5Audio src={staticFile('narration.mp3')} volume={0.9} />
    </AbsoluteFill>
  );
};

支援的格式

所有 Chrome 支援的音訊格式均受支援，包括：

MP3（.mp3）
WAV（.wav）
OGG（.ogg）
AAC（.aac）
FLAC（.flac）

注意事項

<Html5Audio> 不支援 @remotion/web-renderer（客戶端渲染）。若需客戶端渲染，請改用 @remotion/media 套件中的 <Audio>。
本機檔案應放置於專案的 public/ 目錄下，並透過 staticFile() 函數引用，以確保在開發環境與渲染環境中均能正確解析路徑。

另請參閱