useMultibandVolume() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry calls 2 called by 1

Entity Profile

ComponentRegistry→ ChartRegistry→ useMultibandVolume() — ui Function Reference

Dependency Diagram

graph TD
  309376d6_42d7_5ee3_cee2_ca32001fcef1["useMultibandVolume()"]
  140880de_8350_c565_0d8f_48f12ee18f06["elevenlabs.tsx"]
  309376d6_42d7_5ee3_cee2_ca32001fcef1 -->|defined in| 140880de_8350_c565_0d8f_48f12ee18f06
  4f0ce0c3_b28f_faad_b08d_1c0dda7f7918["BarVisualizerComponent()"]
  4f0ce0c3_b28f_faad_b08d_1c0dda7f7918 -->|calls| 309376d6_42d7_5ee3_cee2_ca32001fcef1
  c15d94b4_fd6f_c1de_3ea2_fce8c0f16259["createAudioAnalyser()"]
  309376d6_42d7_5ee3_cee2_ca32001fcef1 -->|calls| c15d94b4_fd6f_c1de_3ea2_fce8c0f16259
  c32d7dc1_3436_13f7_1100_8c3618d7d9f1["normalizeDb()"]
  309376d6_42d7_5ee3_cee2_ca32001fcef1 -->|calls| c32d7dc1_3436_13f7_1100_8c3618d7d9f1
  style 309376d6_42d7_5ee3_cee2_ca32001fcef1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/blocks/elevenlabs.tsx lines 282–371

export function useMultibandVolume(
  mediaStream?: MediaStream | null,
  options: MultiBandVolumeOptions = {}
) {
  const opts = useMemo(() => ({ ...multibandDefaults, ...options }), [options])

  const [frequencyBands, setFrequencyBands] = useState<number[]>(() =>
    new Array(opts.bands).fill(0)
  )
  const bandsRef = useRef<number[]>(new Array(opts.bands).fill(0))
  const frameId = useRef<number | undefined>(undefined)

  useEffect(() => {
    if (!mediaStream) {
      const emptyBands = new Array(opts.bands).fill(0)
      setTimeout(() => {
        setFrequencyBands(emptyBands)
      }, 0)
      bandsRef.current = emptyBands
      return
    }

    const { analyser, cleanup } = createAudioAnalyser(
      mediaStream,
      opts.analyserOptions
    )

    const bufferLength = analyser.frequencyBinCount
    const dataArray = new Float32Array(bufferLength)
    const sliceStart = opts.loPass!
    const sliceEnd = opts.hiPass!
    const sliceLength = sliceEnd - sliceStart
    const chunkSize = Math.ceil(sliceLength / opts.bands!)

    let lastUpdate = 0
    const updateInterval = opts.updateInterval!

    const updateVolume = (timestamp: number) => {
      if (timestamp - lastUpdate >= updateInterval) {
        analyser.getFloatFrequencyData(dataArray)

        // Process directly without creating intermediate arrays
        const chunks = new Array(opts.bands!)

        for (let i = 0; i < opts.bands!; i++) {
          let sum = 0
          let count = 0
          const startIdx = sliceStart + i * chunkSize
          const endIdx = Math.min(sliceStart + (i + 1) * chunkSize, sliceEnd)

          for (let j = startIdx; j < endIdx; j++) {
            sum += normalizeDb(dataArray[j])
            count++
          }

          chunks[i] = count > 0 ? sum / count : 0
        }

        // Only update state if bands changed significantly
        let hasChanged = false
        for (let i = 0; i < chunks.length; i++) {
          if (Math.abs(chunks[i] - bandsRef.current[i]) > 0.01) {
            hasChanged = true
            break
          }
        }

        if (hasChanged) {
          bandsRef.current = chunks
          setFrequencyBands(chunks)
        }

        lastUpdate = timestamp
      }

      frameId.current = requestAnimationFrame(updateVolume)
    }

    frameId.current = requestAnimationFrame(updateVolume)

    return () => {