Chapter 921: visualizeAudioWaveform()

Core Idea

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

Key Concepts

• Arguments
• audioData
• frame
• fps
• numberOfSamples
• windowInSeconds
• dataOffsetInSeconds<AvailableFrom v="4.0.268" />
• normalize?<AvailableFrom v="4.0.280" />

Code Examples

const frame = useCurrentFrame();
const audioData = useAudioData(staticFile('podcast.wav')) as AudioData;
const {fps} = useVideoConfig();

const waveform = visualizeAudioWaveform({
  fps,
  frame,
  audioData,
  numberOfSamples: 16,
  windowInSeconds: 1 / fps,
});

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

Key Takeaways

1. Understand arguments when working with visualizeAudioWaveform().
2. Understand audiodata when working with visualizeAudioWaveform().
3. Understand frame when working with visualizeAudioWaveform().
4. Understand fps when working with visualizeAudioWaveform().
5. Understand numberofsamples when working with visualizeAudioWaveform().

Connects To

• Create Smooth svg Path: related page in the Media Utils (@remotion/media-utils) section.