I want to display the recording time, like when the user clicks start record button, it displays the time and it starts to record, likewise when the stop record button is clicked. How can i track the time from the start of the recording til the end of it
const MyComponent = () => {
const recordAudio = useRef();
const stopRecAudio = useRef();
const getAudio = async() =>{
const stream = await navigator.mediaDevices.getUserMedia(constraints);
const mediaRecorder = new MediaRecorder(stream);
let audio = [];
mediaRecorder.ondataavailable = (e) => {
audio.push(e.data);
};
recordAudio.current.onclick = () => {
if (mediaRecorder.state !== "recording") {
mediaRecorder.start();
}
};
stopRecAudio.current.onclick = () => {
if (mediaRecorder.state !== "inactive") {
mediaRecorder.stop();
}
};
}
return (
<>
<btn ref={recordAudio} > start audio </btn>
<btn ref={stopRecAudio} > stop audio </btn>
</>
);
}