live-waveform

1"use client"
2 
3import { useEffect, useRef, type HTMLAttributes } from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export type LiveWaveformProps = HTMLAttributes<HTMLDivElement> & {
8  active?: boolean
9  processing?: boolean
10  deviceId?: string
11  barWidth?: number
12  barHeight?: number
13  barGap?: number
14  barRadius?: number
15  barColor?: string
16  fadeEdges?: boolean
17  fadeWidth?: number
18  height?: string | number
19  sensitivity?: number
20  smoothingTimeConstant?: number
21  fftSize?: number
22  historySize?: number
23  updateRate?: number
24  mode?: "scrolling" | "static"
25  onError?: (error: Error) => void
26  onStreamReady?: (stream: MediaStream) => void
27  onStreamEnd?: () => void
28}
29 
30export const LiveWaveform = ({
31  active = false,
32  processing = false,
33  deviceId,
34  barWidth = 3,
35  barGap = 1,
36  barRadius = 1.5,
37  barColor,
38  fadeEdges = true,
39  fadeWidth = 24,
40  barHeight: baseBarHeight = 4,
41  height = 64,
42  sensitivity = 1,
43  smoothingTimeConstant = 0.8,
44  fftSize = 256,
45  historySize = 60,
46  updateRate = 30,
47  mode = "static",
48  onError,
49  onStreamReady,
50  onStreamEnd,
51  className,
52  ...props
53}: LiveWaveformProps) => {
54  const canvasRef = useRef<HTMLCanvasElement>(null)
55  const containerRef = useRef<HTMLDivElement>(null)
56  const historyRef = useRef<number[]>([])
57  const analyserRef = useRef<AnalyserNode | null>(null)
58  const audioContextRef = useRef<AudioContext | null>(null)
59  const streamRef = useRef<MediaStream | null>(null)
60  const animationRef = useRef<number>(0)
61  const lastUpdateRef = useRef<number>(0)
62  const processingAnimationRef = useRef<number | null>(null)
63  const lastActiveDataRef = useRef<number[]>([])
64  const transitionProgressRef = useRef(0)
65  const staticBarsRef = useRef<number[]>([])
66  const needsRedrawRef = useRef(true)
67  const gradientCacheRef = useRef<CanvasGradient | null>(null)
68  const lastWidthRef = useRef(0)
69 
70  const heightStyle = typeof height === "number" ? `${height}px` : height
71 
72  // Handle canvas resizing
73  useEffect(() => {
74    const canvas = canvasRef.current
75    const container = containerRef.current
76    if (!canvas || !container) return
77 
78    const resizeObserver = new ResizeObserver(() => {
79      const rect = container.getBoundingClientRect()
80      const dpr = window.devicePixelRatio || 1
81 
82      canvas.width = rect.width * dpr
83      canvas.height = rect.height * dpr
84      canvas.style.width = `${rect.width}px`
85      canvas.style.height = `${rect.height}px`
86 
87      const ctx = canvas.getContext("2d")
88      if (ctx) {
89// … truncated