Signals
Audiogram Bars
Audio-reactive spectrum bar visualization.
PrimitivesignalsAdvanced
Install
npx remotion-ui@latest add audiogram-barsSpectrum bars driven by visualizeAudio() from @remotion/media-utils.
Live preview
Advanced — installs @remotion/media-utils.
AI usage
Install first, then import the copied source component locally.
Install
npx remotion-ui@latest add audiogram-barsImport after install
@/remotion/primitives/audiogram-bars- Use when: audio-first videos, podcast clips, and waveform visuals.
- Customize: src, height, barColor, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { AudiogramBars } from "@/remotion/primitives/audiogram-bars";
<AudiogramBars src={staticFile("podcast.wav")} height={120} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| src* | string | — | Audio file URL or staticFile path. |
| height | number | 120 | Bar container height. |
| barColor | string | "#3b82f6" | Bar fill color. |