Skip to main content

useAudioData()

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

This convenience 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.

info

Remote audio files need to support CORS.

More info
  • Remotion's origin is usually http://localhost:3000, but it may be different if rendering on Lambda or the port is busy.
  • You can use getAudioDurationInSeconds() without the audio needing CORS.
  • You can disable CORS during renders.

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​

tsx
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>;
};
tsx
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​