I'm working on a Next.js project and trying to use react-speech-recognition. It works well on Chrome Desktop, but it doesn't work on Chrome Android. I also tried the push-to-talk method, but it still didn't work. Is it possible to use react-speech-recognition on Chrome Mobile? I want to create a PWA.

"use client";

import React, { useEffect } from "react";
import SpeechRecognition, {
  useSpeechRecognition,
} from "react-speech-recognition";

export default function page() {
  const {
    transcript,
    listening,
    resetTranscript,
    browserSupportsSpeechRecognition,
  } = useSpeechRecognition();

  if (!browserSupportsSpeechRecognition) {
    return <span>Browser doesn not support speech recognition.</span>;
  }

  useEffect(() => {
    SpeechRecognition.startListening({
      continuous: true,
      interimResults: true,
      language: "id-ID",
    });
  }, []);

  return (
    <div className='w-full h-screen bg-finic flex flex-col items-center justify-center'>
      <div className='flex flex-col items-center justify-center h-fit px-[30px]'>
        <h1 className='font-clash font-[700] text-xl text-center text-finblack mt-16'>
            {transcript}
          </h1>
      </div>
    </div>
  );
}

I'm working on a Next.js project and trying to use react-speech-recognition. It works well on Chrome Desktop, but it doesn't work on Chrome Android. I also tried the push-to-talk method, but it still didn't work. Is it possible to use react-speech-recognition on Chrome Mobile? I want to create a PWA.

"use client";

import React, { useEffect } from "react";
import SpeechRecognition, {
  useSpeechRecognition,
} from "react-speech-recognition";

export default function page() {
  const {
    transcript,
    listening,
    resetTranscript,
    browserSupportsSpeechRecognition,
  } = useSpeechRecognition();

  if (!browserSupportsSpeechRecognition) {
    return <span>Browser doesn not support speech recognition.</span>;
  }

  useEffect(() => {
    SpeechRecognition.startListening({
      continuous: true,
      interimResults: true,
      language: "id-ID",
    });
  }, []);

  return (
    <div className='w-full h-screen bg-finic flex flex-col items-center justify-center'>
      <div className='flex flex-col items-center justify-center h-fit px-[30px]'>
        <h1 className='font-clash font-[700] text-xl text-center text-finblack mt-16'>
            {transcript}
          </h1>
      </div>
    </div>
  );
}

• reactjs
• next.js
• speech-recognition
• nextjs-15

1 Answer 1

I found the solution!

The issue occurs because navigator.mediaDevices.getUserMedia({ audio: true }) requires HTTPS to work properly. On Chrome Desktop, it works fine even on localhost, but on Chrome Android, it won't function unless the site is served over HTTPS.

useEffect(() => {
    async function checkMicrophoneAccess() {
      try {
        await navigator.mediaDevices.getUserMedia({ audio: true });
        SpeechRecognition.startListening({
          continuous: true,
          interimResults: true,
          language: "id-ID",
        });
      } catch (err) {
        console.error("Microphone access denied:", err);
      }
    }

    checkMicrophoneAccess();
  }, []);