Chapter 82: useWindowedAudioData()

Core Idea

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

Key Concepts

• Example
• Arguments
• src
• frame
• fps
• windowInSeconds
• requestInit?<AvailableFrom v="4.0.458"/>
• Return value

Code Examples

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

• What it demonstrates: Usage pattern for useWindowedAudioData() from the official docs.

Key Takeaways

1. Understand example when working with useWindowedAudioData().
2. Understand arguments when working with useWindowedAudioData().
3. Understand src when working with useWindowedAudioData().
4. Understand frame when working with useWindowedAudioData().
5. Understand fps when working with useWindowedAudioData().

Connects To

• Cancel Render: related page in the Hooks & Data APIs section.
• Continue Render: related page in the Hooks & Data APIs section.
• Data Fetching: related page in the Hooks & Data APIs section.