useAudioVolume() — ui Function Reference

Architecture documentation for the useAudioVolume() function in elevenlabs.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry calls 1

Entity Profile

ComponentRegistry→ ChartRegistry→ useAudioVolume() — ui Function Reference

Dependency Diagram

graph TD
  7ab52688_e5d2_1af3_4776_54f9178f4007["useAudioVolume()"]
  140880de_8350_c565_0d8f_48f12ee18f06["elevenlabs.tsx"]
  7ab52688_e5d2_1af3_4776_54f9178f4007 -->|defined in| 140880de_8350_c565_0d8f_48f12ee18f06
  c15d94b4_fd6f_c1de_3ea2_fce8c0f16259["createAudioAnalyser()"]
  7ab52688_e5d2_1af3_4776_54f9178f4007 -->|calls| c15d94b4_fd6f_c1de_3ea2_fce8c0f16259
  style 7ab52688_e5d2_1af3_4776_54f9178f4007 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/blocks/elevenlabs.tsx lines 189–249

export function useAudioVolume(
  mediaStream?: MediaStream | null,
  options: AudioAnalyserOptions = { fftSize: 32, smoothingTimeConstant: 0 }
) {
  const [volume, setVolume] = useState(0)
  const volumeRef = useRef(0)
  const frameId = useRef<number | undefined>(undefined)

  // Memoize options to prevent unnecessary re-renders
  const memoizedOptions = useMemo(() => options, [options])

  useEffect(() => {
    if (!mediaStream) {
      // eslint-disable-next-line react-hooks/set-state-in-effect
      setVolume(0)
      volumeRef.current = 0
      return
    }

    const { analyser, cleanup } = createAudioAnalyser(
      mediaStream,
      memoizedOptions
    )

    const bufferLength = analyser.frequencyBinCount
    const dataArray = new Uint8Array(bufferLength)
    let lastUpdate = 0
    const updateInterval = 1000 / 30 // 30 FPS

    const updateVolume = (timestamp: number) => {
      if (timestamp - lastUpdate >= updateInterval) {
        analyser.getByteFrequencyData(dataArray)
        let sum = 0
        for (let i = 0; i < dataArray.length; i++) {
          const a = dataArray[i]
          sum += a * a
        }
        const newVolume = Math.sqrt(sum / dataArray.length) / 255

        // Only update state if volume changed significantly
        if (Math.abs(newVolume - volumeRef.current) > 0.01) {
          volumeRef.current = newVolume
          setVolume(newVolume)
        }
        lastUpdate = timestamp
      }
      frameId.current = requestAnimationFrame(updateVolume)
    }

    frameId.current = requestAnimationFrame(updateVolume)

    return () => {
      cleanup()
      if (frameId.current) {
        cancelAnimationFrame(frameId.current)
      }
    }
  }, [mediaStream, memoizedOptions])

  return volume
}