Audiogram Bars
Audio-reactive spectrum bar visualization.
PrimitiveData & mediaAdvanced
audiogram-bars30fps · 960×540
Install
$ npx remotion-ui@latest add audiogram-barsLog-spaced spectrum bands with decaying peak caps, 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, barColorEnd, 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. |
| barColorEnd | string | - | Second color for a gradient across the spectrum. Defaults to barColor. |
| barGap | number | 3 | Gap between bars in px. |
| numberOfSamples | number | 128 | FFT size used to sample the spectrum. |
| maxBarCount | number | 48 | Log-spaced bands drawn from the spectrum. |
| align | "bottom" | "center" | "bottom" | Grow bars from the baseline or mirror them around it. |
| showPeaks | boolean | true | Draw the decaying peak cap above each bar. |
| showReflection | boolean | false | Faded mirrored copy below the baseline. Ignored when align is center. |
| frame | number | - | Frame override — pass the parent frame inside a Sequence. |