Skip to main content

useAudioData()

Part of the @remotion/media-utils package of helper functions.

This convienience function wraps the getAudioData() function into a hook and does 3 things:

  • Keeps the audio data in a state
  • Wraps the function in a delayRender() / continueRender() pattern.
  • Handles the case where the component gets unmounted while the fetching is in progress and a React error is thrown.

Using this function, you can elegantly render a component based on audio properties, for example together with the visualizeAudio() function.

Arguments#

src#

A string pointing to an audio asset.

Return value#

AudioData | null - An object containing audio data (see documentation of getAudioData()) or null if the data has not been loaded.

Example#

import {useAudioData} from '@remotion/media-utils';
import music from './music.mp3'
export const MyComponent: React.FC = () => {
const audioData = useAudioData(music);
if (!audioData) {
return null;
}
return (
<div>This file has a {audioData.sampleRate} sampleRate.</div>
);
}

See also#