ContextQMD
Back to Remotion

useWindowedAudioData()

packages/docs/docs/use-windowed-audio-data.mdx

4.0.4573.2 KB
Original Source

useWindowedAudioData()<AvailableFrom v="4.0.240" />

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

This is an alternative to useAudioData() that only loads a portion of the audio around the current frame.
It supports all Mediabunny-supported formats.

Before v4.0.383, only WAV files were supported.

Unlike useAudioData(), which keeps all of the audio data in memory, this function makes HTTP Range requests to only load the audio data around the current frame.
We recommend using this function for visualizing audio with a long duration.

:::info Remote audio files need to support CORS.

<details> <summary>More info</summary> <ul> <li> Remotion's origin is usually <code>http://localhost:3000</code>, but it may be different if rendering on Lambda or the port is busy. </li> <li> You can use{' '} <a href="/docs/get-audio-duration-in-seconds"> <code>getAudioDurationInSeconds()</code> </a>{' '} without the audio needing CORS. </li> <li> You can <a href="/docs/chromium-flags#--disable-web-security">disable CORS</a> during renders. </li> </ul> </details> :::

Example

tsx
// ---cut---
import {useWindowedAudioData, visualizeAudio} from '@remotion/media-utils';
import {staticFile, useCurrentFrame, useVideoConfig} from 'remotion';

export const MyComponent: React.FC = () => {
  const {fps} = useVideoConfig();
  const frame = useCurrentFrame();
  const {audioData, dataOffsetInSeconds} = useWindowedAudioData({
    src: staticFile('podcast.wav'),
    frame,
    fps,
    windowInSeconds: 10,
  });

  if (!audioData) {
    return null;
  }

  const visualization = visualizeAudio({
    fps,
    frame,
    audioData,
    numberOfSamples: 16,
    dataOffsetInSeconds,
  });

  return null;
};

Arguments

An object with:

src

A string pointing to an audio asset.

frame

number

The current frame of the composition.

fps

number

The frames per second of the composition. Should be taken from useVideoConfig().

windowInSeconds

number

The audio will be segmented into windows of this length.
The function will load the audio data around the current frame and the windows before and after.

In this example, the window is 10 seconds long, so the function will load the current window as well as the previous and next one, leading to up to 30 seconds of audio being loaded at a time.

Return value

An object with:

audioData

AudioData | null

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

dataOffsetInSeconds

number

The offset in seconds of the audio data that is currently loaded.
You should pass it through to visualizeAudio().

See also