I’m working on a React application where I need to automatically stop the audio recording when silence is detected. I’m using the ReactMediaRecorder component for recording audio. Currently, I have a stop button that stops the recording when clicked, but I want the recording to stop automatically when there’s a period of silence.

Here is my current implementation:

import React, {useEffect, useRef} from "react";
import { Button } from "antd";
import { AudioOutlined, StopOutlined } from "@ant-design/icons";
import { ReactMediaRecorder } from "react-media-recorder";
import '../../style/InterviewWithAi.css'
import axios from "axios";
import { useSelector } from "react-redux";
import {  toast } from 'react-toastify';
import { useDispatch } from 'react-redux'
import {setResult} from '../../redux/interviewReducer'
import { useNavigate } from "react-router-dom";

function InterviewWithAi() {
  const videoRef = useRef(null);
  useEffect(() => {
    const startVideo = async () => {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
        if (videoRef.current) {
          videoRef.current.srcObject = stream;
        }
      } catch (error) {
        console.error('Error accessing user camera: ', error);
      }
    };

    startVideo();

    const currentVideoRef = videoRef.current;

    return () => {
      if (currentVideoRef && currentVideoRef.srcObject) {
        const tracks = currentVideoRef.srcObject.getTracks();
        tracks.forEach(track => track.stop());
      }
    };
  }, []);
  const dispatch = useDispatch()
  const navigate = useNavigate();
  
  const postition = useSelector((state) => state.interviewReducer.isPosition)
  const level = useSelector((state) => state.interviewReducer.isLevel)
  const candidate = useSelector((state) => state.interviewReducer.isCandidate)
  console.log(postition,level,candidate);
  const handleStopClick = async (blobUrl,blob) => {
    try {
      const data = new FormData()
      data.append('file',blob,'myvoice.wav')
      data.append('position',postition)
      data.append('level',level)
      data.append('candidate',candidate)
      const response = await axios.post('https://www.virtualmunim.in/api/talk',data,{
        headers: {
          'Content-Type': "multipart/form-data"
        },
        responseType: "arraybuffer"
      })
      if (response.status === 200) {
        console.log(response.data);
        const data = response.data
        const blobMpeg = new Blob([data],{type: "audio/mpeg"})
        const audio = new Audio()
        audio.src = window.URL.createObjectURL(blobMpeg)
        audio.play()
      }
    } catch (error) {
      console.log('Error While Fetching: ',error);
    }
  };

  async function handleClearHistoryClick() {
    try {
      const response = await axios.post('https://www.virtualmunim.in/api/cleardata',{
        candidate: candidate
      })
      if (response.status === 200) {
       toast.success("History Deleted") 
      }
    } catch (error) {
      console.log('Error in deleting', error);
    }
  }

  async function handleResult() {
    try {
      const response = await axios.post('https://www.virtualmunim.in/api/interviewresult',{
        candidate: candidate
      })
      if (response.status === 200) {
        console.log(response.data);
        dispatch(setResult(response.data))
        navigate('/interviewresult')
      }
    } catch (error) {
      console.log('Error While Fetching: ',error);
    }
  }
  return (
    <ReactMediaRecorder
      audio
      onStop={handleStopClick}
      render={({ status, startRecording, stopRecording }) => (
        <div className="InterviewWithAi">
          <Button
            className={`record-button ${status === "recording" ? "active" : ""}`}
            shape="circle"
            icon={<AudioOutlined />}
            size="large"
            onClick={startRecording}
          />
          <Button
            className={`stop-button ${status === "recording" ? "active" : ""}`}
            shape="circle"
            icon={<StopOutlined />}
            size="large"
            onClick={stopRecording}
          />
          <Button
            className="clear-button"
            shape="rectangle"
            size="large"
            onClick={handleClearHistoryClick}
          >
            Clear History
          </Button>
          <video ref={videoRef} autoPlay muted className="InterviewWithAiVideo"></video>
          <Button
            className="InterviewWithAiResult"
            shape="rectangle"
            size="large"
            onClick={handleResult}
          >
            Result
          </Button>
        </div>
      )}
    />
  );
}

export default InterviewWithAi;

Could anyone provide guidance or examples on how to detect silence in the audio stream and automatically stop the recording when silence is detected?

Additional context:

I’m using the react-media-recorder package for recording audio.
The stop button currently stops the recording manually, but I need to implement automatic stopping on silence detection.
Thank you in advance for your help!