React Speech Recognition not working on mobile browser

Question

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>
  );
}

Nico A.L · Accepted Answer · 2025-04-03 08:34:23Z

0

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();
  }, []);

answered Apr 3 at 8:34

Nico A.L

133 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Speech Recognition not working on mobile browser

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related