1---
2name: audio-visualization
3description: Audio visualization patterns - spectrum bars, waveforms, bass-reactive effects
4metadata:
5  tags: audio, visualization, spectrum, waveform, bass, music, audiogram, frequency
6---
7 
8# Audio Visualization in Remotion
9 
10## Prerequisites
11 
12```bash
13npx remotion add @remotion/media-utils
14```
15 
16## Loading Audio Data
17 
18Use `useWindowedAudioData()` (https://www.remotion.dev/docs/use-windowed-audio-data) to load audio data:
19 
20```tsx
21import { useWindowedAudioData } from "@remotion/media-utils";
22import { staticFile, useCurrentFrame, useVideoConfig } from "remotion";
23 
24const frame = useCurrentFrame();
25const { fps } = useVideoConfig();
26 
27const { audioData, dataOffsetInSeconds } = useWindowedAudioData({
28  src: staticFile("podcast.wav"),
29  frame,
30  fps,
31  windowInSeconds: 30,
32});
33```
34 
35## Spectrum Bar Visualization
36 
37Use `visualizeAudio()` (https://www.remotion.dev/docs/visualize-audio) to get frequency data for bar charts:
38 
39```tsx
40import { useWindowedAudioData, visualizeAudio } from "@remotion/media-utils";
41import { staticFile, useCurrentFrame, useVideoConfig } from "remotion";
42 
43const frame = useCurrentFrame();
44const { fps } = useVideoConfig();
45 
46const { audioData, dataOffsetInSeconds } = useWindowedAudioData({
47  src: staticFile("music.mp3"),
48  frame,
49  fps,
50  windowInSeconds: 30,
51});
52 
53if (!audioData) {
54  return null;
55}
56 
57const frequencies = visualizeAudio({
58  fps,
59  frame,
60  audioData,
61  numberOfSamples: 256,
62  optimizeFor: "speed",
63  dataOffsetInSeconds,
64});
65 
66return (
67  <div style={{ display: "flex", alignItems: "flex-end", height: 200 }}>
68    {frequencies.map((v, i) => (
69      <div
70        key={i}
71        style={{
72          flex: 1,
73          height: `${v * 100}%`,
74          backgroundColor: "#0b84f3",
75          margin: "0 1px",
76        }}
77      />
78    ))}
79  </div>
80);
81```
82 
83- `numberOfSamples` must be power of 2 (32, 64, 128, 256, 512, 1024)
84- Values range 0-1; left of array = bass, right = highs
85- Use `optimizeFor: "speed"` for Lambda or high sample counts
86 
87**Important:** When passing `audioData` to child components, also pass the `frame` from the parent. Do not call `useCurrentFrame()` in each child - this causes discontinuous visualization when children are inside `<Sequence>` with offsets.
88 
89## Waveform Visualization
90 
91Use `visualizeAudioWaveform()` (https://www.remotion.dev/docs/media-utils/visualize-audio-waveform) with `createSmoothSvgPath()` (https://www.remotion.dev/docs/media-utils/create-smooth-svg-path) for oscilloscope-style displays:
92 
93```tsx
94import {
95  createSmoothSvgPath,
96  useWindowedAudioData,
97  visualizeAudioWaveform,
98} from "@remotion/media-utils";
99import { staticFile, useCurrentFrame, useVideoConfig } from "remotion";
100 
101const frame = useCurrentFrame();
102const { width, fps } = useVideoConfig();
103const HEIGHT = 200;
104 
105const { audioData, dataOffsetInSeconds } = useWindowedAudioData({
106  src: staticFile("voice.wav"),
107  frame,
108  fps,
109  windowInSeconds: 30,
110});
111 
112if (!audioData) {
113  return null;
114}
115 
116const waveform = visualizeAudioWaveform({
117  fps,
118  frame,
119  audioData,
120  numberOfSamples: 256,
121  windowInSeconds: 0.5,
122  dataOffsetInSeconds,
123});
124 
125const path = createSmoothSvgPath({
126  points: waveform.map((y, i) => ({
127    x: (i / (waveform.length - 1)) * width,
128    y: HEIGHT / 2 + (y * HEIGHT) / 2,
129  })),
130});
131 
132return (
133  <svg width={width} height={HEIGHT}>
134    <path d={path} fill="none" stroke="#0b84f3" strokeWidth={2} />
135  </svg>
136);
137```
138 
139## Bass-Reactive Effects
140 
141Extract low frequencies for beat-reactive animations:
142 
143```tsx
144const frequencies = visualizeAudio({
145  fps,
146  frame,
147  audioData,
148  numberOfSamples: 128,
149  optimizeFor: "speed",
150  dataOffsetInSeconds,
151});
152 
153const lowFrequencies = frequencies.slice(0, 32);
154const bassIntensity =
155  lowFrequencies.reduce((sum, v) => sum + v, 0) / lowFrequencies.length;
156 
157const scale = 1 + bassIntensity * 0.5;
158const opacity = Math.min(0.6, bassIntensity * 0.8);
159```
160 
161## Volume-Based Waveform
162 
163Use `getWaveformPortion()` (https://www.remotion.dev/docs/get-waveform-portion) when you need simplified volume data instead of frequency spectrum:
164 
165```tsx
166import { getWaveformPortion } from "@remotion/media-utils";
167import { useCurrentFrame, useVideoConfig } from "remotion";
168 
169const frame = useCurrentFrame();
170const { fps } = useVideoConfig();
171const currentTimeInSeconds = frame / fps;
172 
173const waveform = getWaveformPortion({
174  audioData,
175  startTimeInSeconds: currentTimeInSeconds,
176  durationInSeconds: 5,
177  numberOfSamples: 50,
178});
179 
180// Returns array of { index, amplitude } objects (amplitude: 0-1)
181waveform.map((bar) => (
182  <div key={bar.index} style={{ height: bar.amplitude * 100 }} />
183));
184```
185 
186## Postprocessing
187 
188Low frequencies naturally dominate. Apply logarithmic scaling for visual balance:
189 
190```tsx
191const minDb = -100;
192const maxDb = -30;
193 
194const scaled = frequencies.map((value) => {
195  const db = 20 * Math.log10(value);
196  return (db - minDb) / (maxDb - minDb);
197});
198```
199