window.SpeechRecognition || window.webkitSpeechRecognition; is not working

Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Speech Recognition</title>
</head>
<body>

    <input type="text" id="sendInput" placeholder="Recognized text will appear here">
    <button id="speechButton">Hold to Speak</button>

    <script>
        let recognition;
        let isListening = false;

        function initSpeechRecognition() {
          navigator.permissions.query({ name: "microphone" }).then((result) => {
  console.log("Microphone Permission:", result.state);
});
            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
            if (!SpeechRecognition) {
                alert("Your browser does not support Speech Recognition.");
                return;
            }

            recognition = new SpeechRecognition();
            recognition.lang = "en-US";
            recognition.interimResults = false;  // Only get final results
            recognition.continuous = false;      // Stop after each speech

            recognition.onstart = () => console.log("🎙️ Speech recognition started...");
            recognition.onspeechstart = () => console.log("🎤 Detected speech...");
            recognition.onspeechend = () => console.log("🛑 Speech ended...");

            recognition.onresult = (event) => {
                console.log("🔊 Recognized:", event.results[0][0].transcript);
                document.getElementById("sendInput").value += event.results[0][0].transcript + " ";
            };

            recognition.onerror = (event) => console.error("❌ Speech recognition error:", event.error);
            recognition.onend = () => console.log("⏹️ Speech recognition stopped.");
        }

        function startSpeechRecognition() {
            if (!recognition) initSpeechRecognition();
            if (!isListening) {
                isListening = true;
                recognition.start();
                console.log("✅ Speech Recognition Started.");
            }
        }

        function stopSpeechRecognition() {
            if (recognition && isListening) {
                isListening = false;
                recognition.stop();
                console.log("⏹️ Speech Recognition Stopped.");
            }
        }

        // Button event listeners
        const speechButton = document.getElementById("speechButton");
        speechButton.addEventListener("mousedown", startSpeechRecognition);
        speechButton.addEventListener("mouseup", stopSpeechRecognition);
        speechButton.addEventListener("mouseleave", stopSpeechRecognition);
    </script>

</body>
</html>

I am trying to use speech recognition but below code is not getting called.

recognition.onresult = (event) => {
                console.log("🔊 Recognized:", event.results[0][0].transcript);
                document.getElementById("sendInput").value += event.results[0][0].transcript + " ";
            };

I tried your code without any changes and was able to get it to work. Maybe it's an permission on you browser? — Jeet Singh
– Jeet Singh, Commented Mar 24 at 9:18

YASSINE · Accepted Answer · 2025-03-24 10:23:44Z

0

You're calling recognition.stop() on the button's mouseup (or mouseleave), that might interrupt the recognition process if you release the button too soon, try instead of stopping recognition immediately on mouseup letting the API decide when to stop (you can use onspeechend)

answered Mar 24 at 10:23

YASSINE

1001 silver badge5 bronze badges

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

2 Comments

Manzer A Mar 24 at 11:32

Can you please show me in code.

YASSINE Mar 24 at 11:42

recognition.onspeechend = () => { console.log("Speech ended. Stopping recognition..."); if (isListening) { recognition.stop(); isListening = false; } };

Collectives™ on Stack Overflow

window.SpeechRecognition || window.webkitSpeechRecognition; is not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related