audio-viz-utils

1import {
2  useWindowedAudioData,
3  visualizeAudio,
4} from "@remotion/media-utils";
5import { useCurrentFrame, useVideoConfig } from "remotion";
6 
7/** Remotion recommends a generous window so sliding reloads do not drop audio mid-playback. */
8export const DEFAULT_AUDIO_WINDOW_SECONDS = 30;
9 
10const clamp01 = (value: number) => Math.min(1, Math.max(0, value));
11const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
12 
13export type SpectrumBandOptions = {
14  /** How many display bands the FFT bins collapse into. */
15  bandCount?: number;
16  /**
17   * Bins below this index are folded into the first band. Bin 0 carries DC plus
18   * rumble, which otherwise dwarfs everything musical.
19   */
20  minBin?: number;
21  /**
22   * Music loses roughly 6 dB per octave, so an untilted spectrum renders as a
23   * ramp that collapses into the noise floor after the first few bars. Tilting
24   * it back up spreads the bands across the full height.
25   */
26  tiltDbPerOctave?: number;
27  /** Band level mapped to 0. */
28  floorDb?: number;
29  /** Band level mapped to 1. */
30  ceilingDb?: number;
31  /** Blends each band toward its neighbours to remove single-bin comb artifacts. */
32  neighbourBlend?: number;
33};
34 
35export const SPECTRUM_DEFAULTS = {
36  bandCount: 48,
37  minBin: 1,
38  tiltDbPerOctave: 6,
39  // Window measured against tilted band levels: a full-scale mix lands around
40  // -6 dB on transients and drops to roughly -20 dB between hits.
41  floorDb: -20,
42  ceilingDb: -5,
43  neighbourBlend: 0.25,
44} as const satisfies Required<SpectrumBandOptions>;
45 
46/** Geometric band edges — equal width per octave rather than per hertz. */
47function logBandEdges(binCount: number, bandCount: number, minBin: number) {
48  const first = Math.max(1, minBin);
49  const ratio = (binCount / first) ** (1 / bandCount);
50 
51  return Array.from(
52    { length: bandCount + 1 },
53    (_, index) => first * ratio ** index,
54  );
55}
56 
57/**
58 * Turns raw `visualizeAudio()` magnitudes into 0-1 display bands.
59 *
60 * Linear downsampling puts every octave above ~1 kHz into the last couple of
61 * bars and leaves the rest of the display static, so bins are grouped
62 * logarithmically, tilted to undo the natural spectral rolloff, and mapped
63 * through a decibel window.
64 */
65export function toSpectrumBands(
66  frequencies: number[],
67  options: SpectrumBandOptions = {},
68): number[] {
69  const bandCount = options.bandCount ?? SPECTRUM_DEFAULTS.bandCount;
70  const minBin = options.minBin ?? SPECTRUM_DEFAULTS.minBin;
71  const tiltDbPerOctave =
72// … truncated