Skip to main content

audioBufferToDataUrl()

@remotion/media-utils 包中的辅助函数之一。从 v2.5.7 版本开始提供。

此 API 接受一个 AudioBuffer 实例，并将其转换为 Base 64 数据 URL，以便将其传递给 <Audio /> 标签。

API 用法​

tsx
import { audioBufferToDataUrl } from "@remotion/media-utils";
 
const str = audioBufferToDataUrl(audioBuffer);
tsx
import { audioBufferToDataUrl } from "@remotion/media-utils";
 
const str = audioBufferToDataUrl(audioBuffer);

示例：渲染正弦波​

以下合成将使用 C4 音高渲染一个正弦波。

tsx
import { audioBufferToDataUrl } from "@remotion/media-utils";
import { useCallback, useEffect, useState } from "react";
import {
  Audio,
  cancelRender,
  continueRender,
  delayRender,
  interpolate,
  useVideoConfig,
} from "remotion";
 
const C4_FREQUENCY = 261.63;
const sampleRate = 44100;
 
export const OfflineAudioBufferExample: React.FC = () => {
  const [handle] = useState(() => delayRender());
  const [audioBuffer, setAudioBuffer] = useState<string | null>(null);
  const { fps, durationInFrames } = useVideoConfig();
  const lengthInSeconds = durationInFrames / fps;
 
  const renderAudio = useCallback(async () => {
    const offlineContext = new OfflineAudioContext({
      numberOfChannels: 2,
      length: sampleRate * lengthInSeconds,
      sampleRate,
    });
    const oscillatorNode = offlineContext.createOscillator();
    const gainNode = offlineContext.createGain();
    oscillatorNode.connect(gainNode);
    gainNode.connect(offlineContext.destination);
    gainNode.gain.setValueAtTime(0.5, offlineContext.currentTime);
 
    oscillatorNode.type = "sine";
    oscillatorNode.frequency.value = C4_FREQUENCY;
 
    const { currentTime } = offlineContext;
    oscillatorNode.start(currentTime);
    oscillatorNode.stop(currentTime + lengthInSeconds);
 
    const buffer = await offlineContext.startRendering();
    setAudioBuffer(audioBufferToDataUrl(buffer));
 
    continueRender(handle);
  }, [handle, lengthInSeconds]);
 
  useEffect(() => {
    renderAudio().catch((err) => cancelRender(err));
  }, [renderAudio]);
 
  return audioBuffer ? (
    <Audio
      src={audioBuffer}
      startFrom={0}
      endAt={100}
      volume={(f) =>
        interpolate(f, [0, 50, 100], [0, 1, 0], {
          extrapolateLeft: "clamp",
          extrapolateRight: "clamp",
        })
      }
    />
  ) : null;
};
tsx
import { audioBufferToDataUrl } from "@remotion/media-utils";
import { useCallback, useEffect, useState } from "react";
import {
  Audio,
  cancelRender,
  continueRender,
  delayRender,
  interpolate,
  useVideoConfig,
} from "remotion";
 
const C4_FREQUENCY = 261.63;
const sampleRate = 44100;
 
export const OfflineAudioBufferExample: React.FC = () => {
  const [handle] = useState(() => delayRender());
  const [audioBuffer, setAudioBuffer] = useState<string | null>(null);
  const { fps, durationInFrames } = useVideoConfig();
  const lengthInSeconds = durationInFrames / fps;
 
  const renderAudio = useCallback(async () => {
    const offlineContext = new OfflineAudioContext({
      numberOfChannels: 2,
      length: sampleRate * lengthInSeconds,
      sampleRate,
    });
    const oscillatorNode = offlineContext.createOscillator();
    const gainNode = offlineContext.createGain();
    oscillatorNode.connect(gainNode);
    gainNode.connect(offlineContext.destination);
    gainNode.gain.setValueAtTime(0.5, offlineContext.currentTime);
 
    oscillatorNode.type = "sine";
    oscillatorNode.frequency.value = C4_FREQUENCY;
 
    const { currentTime } = offlineContext;
    oscillatorNode.start(currentTime);
    oscillatorNode.stop(currentTime + lengthInSeconds);
 
    const buffer = await offlineContext.startRendering();
    setAudioBuffer(audioBufferToDataUrl(buffer));
 
    continueRender(handle);
  }, [handle, lengthInSeconds]);
 
  useEffect(() => {
    renderAudio().catch((err) => cancelRender(err));
  }, [renderAudio]);
 
  return audioBuffer ? (
    <Audio
      src={audioBuffer}
      startFrom={0}
      endAt={100}
      volume={(f) =>
        interpolate(f, [0, 50, 100], [0, 1, 0], {
          extrapolateLeft: "clamp",
          extrapolateRight: "clamp",
        })
      }
    />
  ) : null;
};

另请参阅​