useMultibandVolume() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives calls 2 called by 1

Entity Profile

ComponentRegistry→ UIPrimitives→ useMultibandVolume() — ui Function Reference

Dependency Diagram

graph TD
  e44c6358_72b2_3916_b4f2_57dd5af079e2["useMultibandVolume()"]
  a1a6ebaf_3f49_5bb2_b404_b9f06dce2cab["elevenlabs.tsx"]
  e44c6358_72b2_3916_b4f2_57dd5af079e2 -->|defined in| a1a6ebaf_3f49_5bb2_b404_b9f06dce2cab
  f7c88c80_61a2_5745_3423_ce9c217de6c5["BarVisualizerComponent()"]
  f7c88c80_61a2_5745_3423_ce9c217de6c5 -->|calls| e44c6358_72b2_3916_b4f2_57dd5af079e2
  2dd97ecc_39fb_a7c1_bcf4_a1089eb7be33["createAudioAnalyser()"]
  e44c6358_72b2_3916_b4f2_57dd5af079e2 -->|calls| 2dd97ecc_39fb_a7c1_bcf4_a1089eb7be33
  a41b87d8_5c56_21a6_835b_29ceb398dd8f["normalizeDb()"]
  e44c6358_72b2_3916_b4f2_57dd5af079e2 -->|calls| a41b87d8_5c56_21a6_835b_29ceb398dd8f
  style e44c6358_72b2_3916_b4f2_57dd5af079e2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/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 () => {