I am currently working on a React.js application that requires speech-to-text recognition functionality. While the implementation works seamlessly in Google Chrome, I am encountering issues when trying to achieve the same in Mozilla Firefox.

Here are the details of my setup and the issues I am facing:

React.js Application: I am using React.js for the frontend.

Speech Recognition API: I have utilized the Web Speech API for implementing speech-to-text recognition.

Issue in Firefox: The speech recognition feature does not seem to work in Firefox, despite functioning correctly in Chrome and edge.

const handleSpeechControl = () => {

if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
  setIsStartRecording(true);
  setSearchText("");
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  const recognition = new SpeechRecognition();
//  recognition = new window.webkitSpeechRecognition();
  recognition.lang = "en-US";
  recognition.continuous = true;
  recognition.interimResults = true;

  recognition.onresult = (event) => {
    let fullTranscript = "";
    for (let i = event.resultIndex; i < event.results.length; i++) {
      fullTranscript += event.results[i][0].transcript + " ";
    }
    setSearchText(fullTranscript);
  };

  recognition.start();

  const intervalId = setInterval(() => {
    setTimer((prevTimer) => {
      if (prevTimer === 1) {
        clearInterval(intervalId);
        recognition.stop();
        setIsStartRecording(false);
        return 10;
      }
      return prevTimer - 1;
    });
  }, 1000);

  return () => {
    clearInterval(intervalId);
    recognition.stop();
    setIsStartRecording(false);
  };
} else {
  // Unable to determine the browser
  console.log("Speech recognition not supported in this browser");
  alert("Speech recognition not supported in this browser")
}};