Speech Recognition - Run continuously

javascript html speech-recognition html5-audio

11,301

Solution 1

No matter the settings you'll choose, Google Chrome stops the speech recognition engine after a while... there's no way around it.

The only reliable solution I've found for continuous speech recognition, is to start it again by binding to the onend() event, as you've suggested.

If you try a similar technique, be aware of the following:

If you are not on HTTPS, the user will be prompted to give permission over and over again on each restart. For this, and many other reasons, don't compromise on HTTP when using Speech Recognition.
Make sure you are not restarting the speech recognition immediately onend() without some safeguards to make sure you aren't putting the browser into an endless loop (e.g. two open tabs with onend(function() {restart()}) can crash the browser, as I've detailed in this bug report: https://code.google.com/p/chromium/issues/detail?id=296690) See https://github.com/TalAter/annyang/blob/1ee294e2b6cb9953adb9dcccf4d3fcc7eca24c2c/src/annyang.js#L214 for how I handle this.
Don't autorestart if the reason for it ending is something like service-not-allowed or not-allowed See https://github.com/TalAter/annyang/blob/1ee294e2b6cb9953adb9dcccf4d3fcc7eca24c2c/src/annyang.js#L196

You can see how I handled this in my code - https://github.com/TalAter/annyang/blob/master/src/annyang.js

Solution 2

Kindly try this code, I think it does what you need:

<!DOCTYPE html>
<html>
    <head>
        <title>Speech recognition</title>
        <style>
            #result{
                border: 2px solid black;
                height: 200px;
                border-radius: 3px;
                font-size: 14px;
            }
            button{
                position: absolute;
                top: 240px;
                left: 50%;
            }
        </style>
        <script type="application/javascript">
            function start(){
                var r = document.getElementById("result");
            if("webkitSpeechRecognition" in window){
                var speechRecognizer = new webkitSpeechRecognition();
                speechRecognizer.continuous = true;
                speechRecognizer.interimResults = true;
                speechRecognizer.lang = "en-US";
                speechRecognizer.start();
                
                var finalTranscripts = "";
                speechRecognizer.onresult = function(event){
                    var interimTranscripts = "";
                    for(var i=event.resultIndex; i<event.results.length; i++){
                        var transcript = event.results[i][0].transcript;
                        transcript.replace("\n", "<br>");
                        if(event.results[i].isFinal){
                            finalTranscripts += transcript;
                        }
                        else{
                            interimTranscripts += transcript;
                        }
                        r.innerHTML = finalTranscripts + '<span style="color: #999;">' + interimTranscripts + '</span>';
                    }
                };
                speechRecognizer.onerror = function(event){
                };
            }
            else{
                r.innerHTML = "Your browser does not support that.";
            }
            }
        </script>
    </head>
    <body>
        <div id="result"></div>
        <button onclick="start()">Listen</button>
    </body>
</html>

Solution 3

HTML 5 Speech Continuously requires this...

window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;

if ('SpeechRecognition' in window) {
  console.log('supported speech')
} else {
  console.error('speech not supported')
}
    const recognition = new window.SpeechRecognition();

    recognition.continuous = true;

    recognition.onresult = (event) => {
      console.log('transscript: ', event.results[event.results.length -1][0].transcript);
    }
    
    recognition.start();

Solution 4

You will have to to be rstarting the engine every few seconds.see at my code, https://github.com/servo-ai/servo-platform/blob/master/editor/src/assets/js/voice/asr.js

Note: after v 70 of chrome, a click UI is needed at least once

View more solutions

11,301

Author by

samanime

Updated on June 05, 2022

Comments

samanime about 2 years

I'm trying to create an HTML5-powered voice-controlled editor using the Speech Recognition API. Currently, the problem is when you start recording, it only lasts for a certain amount of time (basically until the user stops talking).

I can set continuous and interimResults to true, but that doesn't keep it recording forever. It still ends.

I can also tell it to start again during the end event, but then it asks for permission every time, which is highly disruptive.

Is there a way to allow it to go continuously while only having to ask a user once?
Tal Ater about 9 years

@samanime If you believe this is the most accurate answer, please mark the answer as the correct one.
jkw4703 almost 6 years

Just an update. The github links seem to be broken. Here is the current link I found. github.com/TalAter/annyang
Tal Ater almost 6 years

All links have been fixed to ones that shouldn't break with future versions of annyang
SoEzPz over 5 years

I was looking for this "speechRecognizer.continuous = true;" thanks a lot!
Brian Risk about 4 years

This answer is great! the "be aware of the following" section is very useful and goes above-and-beyond what the OP was asking