Chapter 185: Audio Visualization

Core Idea

Remotion has APIs for visualizing audio, for example for creating audiograms or music visualizers.

Key Concepts

• Bar visualization
• Waveform visualization
• Working with large files
• See also

Code Examples

const music = staticFile('music.mp3');

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

  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={music} />
      {visualization.map((v) => {
        return <div style={{width: 1000 * v, height: 15, backgroundColor: 'blue'}} />;
      })}
    </div>
  );
};

• What it demonstrates: Usage pattern for Audio Visualization from the official docs.

Key Takeaways

1. Understand bar visualization when working with Audio Visualization.
2. Understand waveform visualization when working with Audio Visualization.
3. Understand working with large files when working with Audio Visualization.
4. Understand see also when working with Audio Visualization.

Connects To

• Animatedimage: related page in the Assets & Media section.
• Delaying: related page in the Assets & Media section.
• Exporting: related page in the Assets & Media section.