Skip to main content

audioBufferToDataUrl()

Part of the @remotion/media-utilspackage of helper functions. Available from v2.5.7.

This API takes an AudioBuffer instance and converts it to a Base 64 Data URL so it can be passed to an <Audio /> tag.

API Usage

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

Example: Rendering a sine tone

The following composition will render a sine tone with a C4 pitch.

tsx
import { interpolate } from "remotion";
import { useCallback, useEffect, useState } from "react";
import { Audio, continueRender, delayRender, useVideoConfig } from "remotion";
import { audioBufferToDataUrl } from "@remotion/media-utils";
 
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();
}, [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 { interpolate } from "remotion";
import { useCallback, useEffect, useState } from "react";
import { Audio, continueRender, delayRender, useVideoConfig } from "remotion";
import { audioBufferToDataUrl } from "@remotion/media-utils";
 
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();
}, [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;
};

See also