1

I'm actually working on a project with Web Audio API and React, to make audio visualization. One of my goals, is to get the complete (accumulated?) frequency data from my audio file.

Actually I'm using an AudioContext with the createMediaElementSource() method, then I get my data like this:

const [audioFrequencyData, setAudioFrequencyData] = useState([])
useEffect(() => {
  const getFrequencyData = () => {
    audioAnimationFrameId.current = requestAnimationFrame(getFrequencyData)

    const data = new Uint8Array(200)
    audioAnalyzer.getByteFrequencyData(data)

    setAudioFrequencyData([...audioFrequencyData, data])
  }

  if (audioAnalyzer && isAudioPlaying) getFrequencyData()

  return () => cancelAnimationFrame(audioAnimationFrameId.current)
}, [isAudioPlaying, audioAnalyzer])

I was trying to get accumulated data with setAudioFrequencyData([...audioFrequencyData, data]) but I still get only one Uint8Array in my state, with the current frequency data only. I guess I'm missing something with the way getByteFrequencyData() works, but I can find what... Or maybe there is a specificity when working with Uint8Arrays?

Anyway, any help would be great, as I'm stuck with this problem, and can't find a way to solve it.

Thank you in advance for your help!

soykje
  • 189
  • 2
  • 16

0 Answers0