audioBufferToDataUrl()
@remotion/media-utils
包中的辅助函数之一。从 v2.5.7 版本开始提供。
此 API 接受一个 AudioBuffer
实例,并将其转换为 Base 64 数据 URL,以便将其传递给 <Audio />
标签。
API 用法
tsx
import {audioBufferToDataUrl } from "@remotion/media-utils";conststr =audioBufferToDataUrl (audioBuffer );
tsx
import {audioBufferToDataUrl } from "@remotion/media-utils";conststr =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";constC4_FREQUENCY = 261.63;constsampleRate = 44100;export constOfflineAudioBufferExample :React .FC = () => {const [handle ] =useState (() =>delayRender ());const [audioBuffer ,setAudioBuffer ] =useState <string | null>(null);const {fps ,durationInFrames } =useVideoConfig ();constlengthInSeconds =durationInFrames /fps ;constrenderAudio =useCallback (async () => {constofflineContext = newOfflineAudioContext ({numberOfChannels : 2,length :sampleRate *lengthInSeconds ,sampleRate ,});constoscillatorNode =offlineContext .createOscillator ();constgainNode =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 );constbuffer = awaitofflineContext .startRendering ();setAudioBuffer (audioBufferToDataUrl (buffer ));continueRender (handle );}, [handle ,lengthInSeconds ]);useEffect (() => {renderAudio ().catch ((err ) =>cancelRender (err ));}, [renderAudio ]);returnaudioBuffer ? (<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";constC4_FREQUENCY = 261.63;constsampleRate = 44100;export constOfflineAudioBufferExample :React .FC = () => {const [handle ] =useState (() =>delayRender ());const [audioBuffer ,setAudioBuffer ] =useState <string | null>(null);const {fps ,durationInFrames } =useVideoConfig ();constlengthInSeconds =durationInFrames /fps ;constrenderAudio =useCallback (async () => {constofflineContext = newOfflineAudioContext ({numberOfChannels : 2,length :sampleRate *lengthInSeconds ,sampleRate ,});constoscillatorNode =offlineContext .createOscillator ();constgainNode =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 );constbuffer = awaitofflineContext .startRendering ();setAudioBuffer (audioBufferToDataUrl (buffer ));continueRender (handle );}, [handle ,lengthInSeconds ]);useEffect (() => {renderAudio ().catch ((err ) =>cancelRender (err ));}, [renderAudio ]);returnaudioBuffer ? (<Audio src ={audioBuffer }startFrom ={0}endAt ={100}volume ={(f ) =>interpolate (f , [0, 50, 100], [0, 1, 0], {extrapolateLeft : "clamp",extrapolateRight : "clamp",})}/>) : null;};