bar-visualizer

1"use client"
2 
3import {
4  forwardRef,
5  memo,
6  useEffect,
7  useMemo,
8  useRef,
9  useState,
10  type HTMLAttributes,
11} from "react"
12 
13import { cn } from "@/lib/utils"
14 
15export interface AudioAnalyserOptions {
16  fftSize?: number
17  smoothingTimeConstant?: number
18  minDecibels?: number
19  maxDecibels?: number
20}
21 
22function createAudioAnalyser(
23  mediaStream: MediaStream,
24  options: AudioAnalyserOptions = {}
25) {
26  const audioContext = new (window.AudioContext ||
27    (window as unknown as { webkitAudioContext: typeof AudioContext })
28      .webkitAudioContext)()
29  const source = audioContext.createMediaStreamSource(mediaStream)
30  const analyser = audioContext.createAnalyser()
31 
32  if (options.fftSize) analyser.fftSize = options.fftSize
33  if (options.smoothingTimeConstant !== undefined) {
34    analyser.smoothingTimeConstant = options.smoothingTimeConstant
35  }
36  if (options.minDecibels !== undefined)
37    analyser.minDecibels = options.minDecibels
38  if (options.maxDecibels !== undefined)
39    analyser.maxDecibels = options.maxDecibels
40 
41  source.connect(analyser)
42 
43  const cleanup = () => {
44    source.disconnect()
45    audioContext.close()
46  }
47 
48  return { analyser, audioContext, cleanup }
49}
50 
51/**
52 * Hook for tracking the volume of an audio stream using the Web Audio API.
53 * @param mediaStream - The MediaStream to analyze
54 * @param options - Audio analyser options
55 * @returns The current volume level (0-1)
56 */
57export function useAudioVolume(
58  mediaStream?: MediaStream | null,
59  options: AudioAnalyserOptions = { fftSize: 32, smoothingTimeConstant: 0 }
60) {
61  const [volume, setVolume] = useState(0)
62  const volumeRef = useRef(0)
63  const frameId = useRef<number | undefined>(undefined)
64 
65  // Memoize options to prevent unnecessary re-renders
66  const memoizedOptions = useMemo(
67    () => options,
68    [
69      options.fftSize,
70      options.smoothingTimeConstant,
71      options.minDecibels,
72      options.maxDecibels,
73    ]
74  )
75 
76  useEffect(() => {
77    if (!mediaStream) {
78      setVolume(0)
79      volumeRef.current = 0
80      return
81    }
82 
83    const { analyser, cleanup } = createAudioAnalyser(
84      mediaStream,
85      memoizedOptions
86    )
87 
88    const bufferLength = analyser.frequencyBinCount
89    const dataArray = new Uint8Array(bufferLength)
90    let lastUpdate = 0
91    const updateInterval = 1000 / 30 // 30 FPS
92 
93    const updateVolume = (timestamp: number) => {
94      if (timestamp - lastUpdate >= updateInterval) {
95        analyser.getByteFrequencyData(dataArray)
96        let sum = 0
97// … truncated