Speech Recognition - Run continuously

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

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>

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


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:

  1. 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.

  2. 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.

  3. 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

Tags:

Javascript

Html

Speech Recognition

Html5 Audio

Recent Posts