<Html5Audio>

<Html5Audio>

原名 <Audio>

使用此元件，你可以在影片中加入音訊。所有 Chrome 支援的音訊格式都受到支援。

不支援客戶端渲染 <Html5Audio> 不支援 @remotion/web-renderer。請改用 @remotion/media 中的 <Audio>。

API

src

將音訊檔案放入 public/ 資料夾，並使用 staticFile() 引用。

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

volume?

允許你控制整段音訊或逐幀控制音量。閱讀使用音訊頁面以了解更多。

設定靜態音量

import { AbsoluteFill, Html5Audio, staticFile } from 'remotion';
 
export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Html5Audio volume={0.5} src={staticFile('background.mp3')} />
    </AbsoluteFill>
  );
};

隨時間改變音量

import { AbsoluteFill, Html5Audio, interpolate, staticFile } from 'remotion';
 
export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Html5Audio
        volume={(f) =>
          interpolate(f, [0, 30], [0, 1], { extrapolateLeft: 'clamp' })
        }
        src={staticFile('voice.mp3')}
      />
    </AbsoluteFill>
  );
};

預設支援 0 到 1 之間的音量值，在 iOS Safari 中音量始終為 1。詳情請參閱音量限制。

loopVolumeCurveBehavior? v4.0.142

控制使用音量回呼函數並加入 loop 屬性時所返回的幀數。可以是 "repeat"（預設，每次迭代從 0 開始）或 "extend"（持續遞增幀數）。

trimBefore? / trimAfter? v4.0.319

<Html5Audio> 有兩個輔助 prop 可用於裁切音訊：

• trimBefore 將從開頭（左側）移除一部分音訊
• trimAfter 將從結尾（右側）移除一部分音訊

在以下範例中，我們假設 composition 的 fps 為 30。透過傳入 trimBefore={60}，播放立即開始，但會裁切掉前 2 秒的音訊。透過傳入 trimAfter={120}，檔案中第 4 秒之後的音訊將被裁切。音訊將播放從 00:02:00 到 00:04:00 的範圍，即播放 2 秒。

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

startFrom? / endAt?

已棄用：這些 prop 在 4.0.319 版本中已重新命名為 trimBefore 和 trimAfter。它們仍然可以使用，但不能與新 prop 一起使用。

playbackRate? v2.2.0

你可以使用 playbackRate prop 來控制音訊速度。1 為預設值，表示正常速度；0.5 會將音訊減慢為兩倍長度；2 會將音訊加速為兩倍快。

雖然 Remotion 不限制可能的播放速度範圍，但在開發模式下使用的是 HTMLMediaElement.playbackRate API，在極端值時會拋出錯誤。目前，Google Chrome 在播放速率低於 0.0625 或高於 16 時會拋出例外。

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

注意：不支援反向播放。

muted? v2.0.0

muted prop 將被遵守。它會在保持音訊標籤掛載的情況下不播放任何音訊。其值可能隨時間變化，例如只靜音音訊的某個特定段落。

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

name? v4.0.71

一個名稱，將在 Remotion Studio 時間軸中顯示為序列標籤。此屬性純粹用於幫助你在時間軸中追蹤項目。

loop? v3.2.29

你可以使用 loop prop 來循環播放音訊。

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

toneFrequency? v4.0.47

調整音訊的音調——僅在渲染期間套用。接受 0.01 到 2 之間的數字，其中 1 代表原始音調。小於 1 的值會降低音調，大於 1 的值會提高音調。toneFrequency 為 0.5 會將音調降低一半，toneFrequency 為 1.5 會將音調提高 50%。

audioStreamIndex? v4.0.340

選擇要使用的音訊串流。預設為 0。

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Html5Audio
        audioStreamIndex={1}
        src={'https://remotion.media/multiple-audio-streams.mov'}
      />
    </AbsoluteFill>
  );
};

注意：此 prop 僅在渲染期間有效。瀏覽器不支援在未啟用實驗性標誌的情況下選擇音訊軌道。

不要與音訊聲道混淆。一個影片可以有多個音訊串流，每個串流可以有多個聲道。多個音訊串流可用於為影片添加多種語言。音訊串流從零開始索引。

acceptableTimeShiftInSeconds? v3.2.42

在 Remotion Studio 或 Remotion Player 中，如果音訊與 Remotion 內部時間嚴重不同步——無論是由於音訊載入還是頁面速度太慢而無法即時跟上——Remotion 將尋找音訊。預設情況下，如果遇到 0.45 秒的時間偏移，就會觸發尋找。使用此 prop，你可以自訂閾值。

pauseWhenBuffering? v4.0.111

如果設為 true 且音訊正在緩衝，Player 將進入原生緩衝狀態。預設為 false，但在 Remotion 5.0 中將變為 true。

showInTimeline? v4.0.122

如果設為 false，Remotion Studio 的時間軸中將不會顯示任何圖層。預設為 true。

delayRenderTimeoutInMilliseconds? v4.0.140

自訂此元件所進行的 delayRender() 呼叫的逾時時間。

delayRenderRetries? v4.0.140

自訂此元件所進行的 delayRender() 呼叫的重試次數。

useWebAudioApi? v4.0.306

為音訊標籤啟用 Web Audio API。

onError? v4.0.326

處理播放音訊時的錯誤。

crossOrigin?

對應 <audio> 元素的 crossOrigin 屬性。可以是 "anonymous"、"use-credentials" 或 undefined。

allowAmplificationDuringRender? v3.3.17

自 v4.0.279 起已棄用：此 prop 原本是為了選擇性地將音量設定為高於 1 的值，即使它只會在渲染期間套用。此選項不再有意義，因為現在可以將音量設定為高於 1。為了防止合成放大，請將音量設定為不高於 1。

相容性

另請參閱

• 此元件的原始碼
• 使用音訊
• 音訊視覺化
• <Html5Video />
• <Audio />（來自 @remotion/media）