Chapter 985: visualizeAudio()

Core Idea

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

Key Concepts

• Arguments
• audioData
• frame
• fps
• numberOfSamples
• smoothing
• optimizeFor?<AvailableFrom v="4.0.83"/>
• dataOffsetInSeconds<AvailableFrom v="4.0.268" />

Code Examples

export const MyComponent: React.FC = () => {
  const frame = useCurrentFrame();
  const {width, height, fps} = useVideoConfig();
  const audioData = useAudioData(staticFile('music.mp3'));

  if (!audioData) {
    return null;
  }

  const visualization = visualizeAudio({
    fps,
    frame,
    audioData,
    numberOfSamples: 16,
  }); // [0.22, 0.1, 0.01, 0.01, 0.01, 0.02, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

  // Render a bar chart for each frequency, the higher the amplitude,
  // the longer the bar
  return (
    <div>
      <Audio src={staticFile('music.mp3')} />
      {visualization.map((v) => {
        return <div style={{width: 1000 * v, height: 15, backgroundColor: 'blue'}} />;
      })}
    </div>
  );
};

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

Key Takeaways

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

Connects To

• 4 0 Alpha: related page in the Miscellaneous (Core) section.
• ai: related page in the Miscellaneous (Core) section.
• Animated Emoji: related page in the Miscellaneous (Core) section.