live-waveform

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export type LiveWaveformProps = React.HTMLAttributes<HTMLDivElement> & {
8  active?: boolean
9  processing?: boolean
10  stream?: MediaStream | null
11  deviceId?: string
12  barWidth?: number
13  barHeight?: number
14  barGap?: number
15  barRadius?: number
16  barColor?: string
17  fadeEdges?: boolean
18  fadeWidth?: number
19  height?: string | number
20  sensitivity?: number
21  smoothingTimeConstant?: number
22  fftSize?: number
23  historySize?: number
24  updateRate?: number
25  mode?: "scrolling" | "static"
26  onError?: (error: Error) => void
27  onStreamReady?: (stream: MediaStream) => void
28  onStreamEnd?: () => void
29}
30 
31function prefersReducedMotion() {
32  return (
33    typeof window !== "undefined" &&
34    typeof window.matchMedia === "function" &&
35    window.matchMedia("(prefers-reduced-motion: reduce)").matches
36  )
37}
38 
39export const LiveWaveform = ({
40  active = false,
41  processing = false,
42  stream = null,
43  deviceId,
44  barWidth = 4,
45  barGap = 2,
46  barRadius = 2,
47  barColor,
48  fadeEdges = true,
49  fadeWidth = 24,
50  barHeight: baseBarHeight = 4,
51  height = 64,
52  sensitivity = 1,
53  smoothingTimeConstant = 0.8,
54  fftSize = 256,
55  historySize = 60,
56  updateRate = 30,
57  mode = "static",
58  onError,
59  onStreamReady,
60  onStreamEnd,
61  className,
62  ...props
63}: LiveWaveformProps) => {
64  const canvasRef = React.useRef<HTMLCanvasElement>(null)
65  const containerRef = React.useRef<HTMLDivElement>(null)
66  const historyRef = React.useRef<number[]>([])
67  const analyserRef = React.useRef<AnalyserNode | null>(null)
68  const audioContextRef = React.useRef<AudioContext | null>(null)
69  const streamRef = React.useRef<MediaStream | null>(null)
70  const lastUpdateRef = React.useRef<number>(0)
71  const lastActiveDataRef = React.useRef<number[]>([])
72  const transitionProgressRef = React.useRef(0)
73  const staticBarsRef = React.useRef<number[]>([])
74  const needsRedrawRef = React.useRef(true)
75  const gradientCacheRef = React.useRef<CanvasGradient | null>(null)
76  const lastWidthRef = React.useRef(0)
77  // Wakes the render loop when it has parked itself in the idle state.
78  const wakeRef = React.useRef<(() => void) | null>(null)
79 
80  // Keep the latest callbacks in refs so the microphone effect does not
81  // re-acquire the stream every time an inline callback identity changes.
82  const onErrorRef = React.useRef(onError)
83  const onStreamReadyRef = React.useRef(onStreamReady)
84  const onStreamEndRef = React.useRef(onStreamEnd)
85// … truncated