Audio Visualization

Guides

Audio Visualization

Audiogram setup with media-utils.

RemotionUI audiogram components use @remotion/media-utils for frame-accurate spectrum data.

Install

Install

$ npx remotion-ui@latest add audiogram-scene

Usage

Example

import { AudiogramScene } from "@/remotion/scenes/audiogram-scene";
import { staticFile } from "remotion";

<AudiogramScene src={staticFile("podcast.wav")} title="Episode 1" />;

Tips

Pass audio src as staticFile() or a remote URL
Use useWindowedAudioData via audio-viz-utils for custom visualizations
When nesting in <Sequence>, pass frame from parent. Do not call useCurrentFrame() in each bar child

See audiogram-bars and audiogram-scene.

Maps

MapLibre determinism, render flags, and Turf patterns.

AI Usage

How coding agents should use RemotionUI with Remotion.