Cannot read properties of null (reading 'getChannelData') -using react and function saveSound

[andresleonard]

hello, I use react and p5 to create a little app to record sound, but when I used the saveSound function the console gives me this message "Cannot read properties of null (reading 'getChannelData')"and dont give me any file to save. I can't find any information about this. I appreciate any help thanks

this is my code

` import { useState } from "react" import Sketch from 'react-p5'; import "p5/lib/addons/p5.sound"; import Player from './Player' import { memo } from 'react'

function Record() { const [numChildren, setNumChildren] = useState(0) const children = []

for (let i = 0; i < numChildren; i++) {
  children.push(<Player key={i} number={i} test={'test' + i}/>)
}

let mic, recorder, soundFile
let rec = false

const setup = (p5) => {
  mic = new p5.constructor.AudioIn()
  mic.start()
  p5.getAudioContext().resume()

  recorder = new p5.constructor.SoundRecorder()
  recorder.setInput(mic)
  soundFile = new p5.constructor.SoundFile()
}

const draw = (p5) => {
  if(rec){
    saveAudio(p5)
  }
}

const addComponent = () => {
  setNumChildren((count) => count + 1)
  rec = true  
}

function saveAudio(obj){
  recorder.record(soundFile)
  rec = false
  setTimeout(()=>{        
    recorder.stop()
    obj.saveSound(soundFile, 'mySound.wav'
  }, "10000")
}

return (
  <div className="App">
    <Sketch setup={setup} draw={draw}/>
    <ParentComponent addComponent={addComponent}>{children}</ParentComponent>
  </div>
)

}

const ParentComponent = ({ children, addComponent }) => { return ( <> <button onClick={addComponent} id="new_record">new record

{children}

</> ) } `