Am having a problem here, Am tracking the audio Recorder time and displaying it to the user. When i click audio button, it displays btn1 and btn2 buttons, when i click btn2 i expect stopTime() to run and the variable status to update, but the status variable failed to update. status is used to track the recording time when the the recording starts and stops
const Component = () => {
const [interval, setInterv] = useState("");
const [status, setStatus] = useState(0);
const startTime = (sec, setSec, setMin) => {
if (status === 0) {
setStatus(1); // failed to update here
setSec(0);
setMin(0);
let seconds = sec;
setInterv(
setInterval(() => {
seconds = seconds + 1;
if (seconds / 60 === 1) {
setMin((min) => (min += 1));
seconds = 0;
}
setSec(seconds);
}, 1000)
);
}
};
const stopTime = (interval) => {
if (status === 1) {
clearInterval(interval);
setStatus(0); // failed to update here too
}
};
const getAudio = async () =>{
try{
const stream = await navigator.mediaDevices.getUserMedia(constraints);
const mediaRecorder = new MediaRecorder(stream);
btn1.current.onclick = () =>{
mediaRecorder.start();
startTime(param1, param2, param3);
}
btn2.current.onclick = () =>{
mediaRecorder.stop();
stopTime(interval);
}
} catch(ex){
//do something
}
}
return () =>{
<>
<btn onClick={getAudio} > Audio <btn>
<btn ref={btn1} > start audio </btn>
<btn ref={btn2} > stop audio </btn>
</>
}
}