Skip to main content

useWindowedAudioData()v4.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 only works with .wav files.

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 duraiton.

info

Remote audio files need to support CORS.

More info

Example​

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