Audiogram Bars
Audio-reactive spectrum bar visualization.
PrimitiveData & mediaAdvanced
audiogram-bars30fps · 960×540
Install
$ npx remotion-ui@latest add audiogram-barsSpectrum bars driven by visualizeAudio() from @remotion/media-utils.
Advanced. Installs @remotion/media-utils.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/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
Example
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 | "#e8b86d" | Bar fill color. |