audiogram

Audiogram

Turn an audio clip — a podcast highlight, a voiceover, a quote — into a short, captioned video that stops the scroll in a muted feed. The moving element (a waveform or equalizer bars) signals "there is sound here," the captions carry the message for the 80% who watch on mute, and cover art + title + a progress bar give it a finished, branded frame.

When to use

• A podcast soundbite or quote clip for Reels / TikTok / Shorts / feed posts.
• A voiceover or narration that needs a visual so it can post as video.
• Music or any audio where a reactive waveform/bars is the hero.

The one rule that prevents 90% of bugs

Drive every bar height from the current frame, never from a real-time analyser loop. Live AnalyserNode + requestAnimationFrame reads "what is playing right now" — but a video renderer paints frames out of order and faster/slower than real time, so the wave desyncs or freezes. Instead, decode the whole file to amplitude samples once, then compute the displayed value as a pure function of the frame. In Remotion this is useAudioData() + visualizeAudio(); in plain canvas it is decodeAudioData() into a sample array you index by frame.

import { useAudioData, visualizeAudio } from "@remotion/media-utils";
import { useCurrentFrame, useVideoConfig } from "remotion";

const audioData = useAudioData(staticFile("episode.mp3"));
if (!audioData) return null; // still loading
const { fps } = useVideoConfig();
const bars = visualizeAudio({
  audioData,
  frame: useCurrentFrame(),
  fps,
  numberOfSamples: 32, // MUST be a power of two
}); // → Float array, length 32, each 0–1, low freq → high freq

Two ways to render the wave

visualizeAudio returns lows on the left, highs on the right. For a centered equalizer, take the first N bars and mirror them around the middle so the bass sits in the center. numberOfSamples must be a power of two (16/32/64); use 16–32 for a chunky branded look, 64+ for a detailed spectrum. See references/waveform-render.md for full bars and oscilloscope components.