audiogram-bars

1import { useAudioBands } from "@/remotion/lib/audio-viz-utils";
2 
3export type AudiogramBarsProps = {
4  src: string;
5  height?: number;
6  barColor?: string;
7  /** Second colour for the gradient across the spectrum. Defaults to `barColor`. */
8  barColorEnd?: string;
9  barGap?: number;
10  numberOfSamples?: number;
11  maxBarCount?: number;
12  /** `bottom` grows bars from the baseline, `center` mirrors them around it. */
13  align?: "bottom" | "center";
14  /** Draws the decaying peak cap above each bar. */
15  showPeaks?: boolean;
16  /** Mirrored, faded copy below the baseline. Ignored when `align` is `center`. */
17  showReflection?: boolean;
18  /**
19   * Optional frame override.
20   * Pass a parent `frame` when using inside `<Sequence from={...}>` to avoid discontinuities.
21   */
22  frame?: number;
23};
24 
25const clamp01 = (value: number) => Math.min(1, Math.max(0, value));
26const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
27 
28/** Blends two hex colours so a gradient can be sampled per bar. */
29function mixHex(from: string, to: string, t: number) {
30  const parse = (hex: string) => {
31    const value = hex.replace("#", "");
32    const full =
33      value.length === 3
34        ? value
35            .split("")
36            .map((char) => char + char)
37            .join("")
38        : value.slice(0, 6);
39    return [
40      Number.parseInt(full.slice(0, 2), 16),
41      Number.parseInt(full.slice(2, 4), 16),
42      Number.parseInt(full.slice(4, 6), 16),
43    ];
44  };
45 
46  const [r1, g1, b1] = parse(from);
47  const [r2, g2, b2] = parse(to);
48 
49  if ([r1, g1, b1, r2, g2, b2].some((channel) => Number.isNaN(channel))) {
50    return from;
51  }
52 
53  const channel = (a: number, b: number) =>
54    Math.round(lerp(a, b, clamp01(t)))
55      .toString(16)
56      .padStart(2, "0");
57 
58  return `#${channel(r1, r2)}${channel(g1, g2)}${channel(b1, b2)}`;
59}
60 
61type BarProps = {
62  value: number;
63  peak: number;
64  color: string;
65  align: "bottom" | "center";
66  showPeaks: boolean;
67  showReflection: boolean;
68};
69 
70function Bar({
71  value,
72  peak,
73  color,
74  align,
75  showPeaks,
76  showReflection,
77}: BarProps) {
78  // A visible floor keeps the baseline legible during silence instead of
79  // leaving a gap where the spectrum used to be.
80  const level = Math.max(0.035, clamp01(value));
81  const cap = Math.max(level, clamp01(peak));
82  const glow = lerp(0, 18, level);
83  const isCentered = align === "center";
84 
85  return (
86    <div
87      style={{
88        flex: 1,
89        position: "relative",
90        height: "100%",
91// … truncated