Start an action with voice command equal to: "ok Google"

Asked

Viewed 1,551 times

2

I’m trying to create a system, for my site, that starts actions with voice command, but without having to click anything, the only thing the user will have to do and there is no way to enable the microphone. I’m using the Speechrecognition API and the closest I could get is this:

HTML

<!DOCTYPE html>

<html>
<head>
    <script src="js/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="js/teste.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>teste</title>
</head>
<body>
    <button id="btn-gravar-audio">Gravar</button><br/><br/>
        <textarea id="textarea" cols="60" rows="5"></textarea>
</body>
</html>

Javascrpit

window.addEventListener('DOMContentLoaded', function() {

if (window.SpeechRecognition || window.webkitSpeechRecognition) {

    var speech_api = window.SpeechRecognition || window.webkitSpeechRecognition;
    var gravar = new speech_api();
    gravar.continuous = false;
    gravar.interimResults = false;
    gravar.lang = "pt-BR";

    gravar.onresult = function (){
        gravar = event.results[0][0].transcript;
        console.log(gravar);

        if(gravar.toLowerCase() === "gravar"){
                   document.getElementById("btn-gravar-audio").click();
               }
    };

    gravar.start();

}

}, false);

window.addEventListener('DOMContentLoaded', function () {
var btn_gravacao = document.querySelector('#btn-gravar-audio');

var transcricao_audio = '';
var esta_gravando = false;

var dicionario = {
"@": /\b arroba\b/gi,
".": /\b ponto\b/gi,
":": /\b dois pontos\b/gi,
",": /\b v[íi]rgula\b/gi,
"!": /\b exclamação\b/gi,
"?": /\b interrogação\b/gi
};

if (window.SpeechRecognition || window.webkitSpeechRecognition) {

    var speech_api = window.SpeechRecognition || window.webkitSpeechRecognition;
    var receber_audio = new speech_api();

    receber_audio.continuous = true;
    receber_audio.interimResults = true;
    receber_audio.lang = "pt-BR";

    receber_audio.onstart = function () {
        esta_gravando = true;
        btn_gravacao.innerHTML = 'Gravando! Parar gravação';
    };

    receber_audio.onend = function () {
        receber_audio.start();
        esta_gravando = false;
        btn_gravacao.innerHTML = 'Iniciar Gravação';
    };
    receber_audio.onresult = function (event) {
                var interim_transcript = '';

               for(var i = event.resultIndex; i < event.results.length; i++){
                   if(event.results[i].isFinal){
                       transcricao_audio += event.results[i][0].transcript; 
                   }else{
                       interim_transcript += event.results[i][0].transcript; 
                   }

                   var resultado = transcricao_audio || interim_transcript;

                   console.log(resultado);

               }

               for (var substituto in dicionario) {
        resultado = resultado.replace(dicionario[substituto], substituto);
    }



               document.getElementById("textarea").innerHTML = resultado;

    };

    btn_gravacao.addEventListener('click', function (e) {
        if (esta_gravando) {
            receber_audio.stop();
            return;
        }
        receber_audio.start();
    }, false);

} else {
    console.log("navegador não apresenta suporte a web speech api");
}
}, false);

When loading the page the first window.addeventlistener runs. When speaking "record", activates the second and starts rotating, then I speak and write in the textarea. until then functioning normal. The problem is that the first window.addeventlistener runs only for a few seconds and then stops running because Speechrecognition is a while and then stops recording. In the second window.addeventlistener the Speechrecognition is in infinite looping because I put a received audio.start(); inside the received audio.onend = Function() and then forces the Speechrecognition to restart again, but in the first window.addeventlistener when I tried it didn’t work, I also have another problem that is if I say something other than recording, it’s gone! I will have to reload the page again to start recording again, so I did not put record.Non-continuous = true; in the first window.addeventlistener and yes false, but I need that as soon as you finish recording, record again. If I’m making too much ganbiarra, let me know. So far I haven’t seen a better way to work with voice command (for free) than using Speechrecognition. The problem is that I have no idea how the people at google did to make that command "Ok google" when they were still using their site. I only knew I had it after they took it off and from what I saw it was because no one was using it.

javascript html5

  • as quoted here reply voice recognition is forced to stop after a few seconds, it must be a security mechanism so that no website is spying on the user indefinitely. I suggest you use a timer setTimeout(function() {...}) to check if your voice capture is still running and, if not, restart it, rescheduling it at the end of setTimeout.

  • I tried using setTimeout and setInterval as well, but it seems that Speechrecognition is blocking.

  • That one answer here suggests using the setTimeout to stop voice recognition (which will invoke the .onend) with a .start() at the event .onend

  • Take a look at this video and you can get a Light! https://www.youtube.com/watch?v=PQV4Tq_KMA

  • Managed to settle here guys. Thanks for the help. hugocsl had already seen this video.

1 answer

0


I managed to solve the problem:

window.addEventListener('DOMContentLoaded', function() {


var audio = '';
var gravando = false;

if (window.SpeechRecognition || window.webkitSpeechRecognition) {

    var speech_api = window.SpeechRecognition || window.webkitSpeechRecognition;
    var gravar_audio = new speech_api();

    gravar_audio.continuous = false;
    gravar_audio.interimResults = false;
    gravar_audio.lang = "pt-BR";

    gravar_audio.onstart = function () {
        gravando = true;
    };

    gravar_audio.onend = function () {
        gravar_audio.start();
        gravando = false;
    };
    gravar_audio.onresult = function (event) {
                       audio = event.results[0][0].transcript; 
                   console.log(audio);



               if(audio.toLowerCase() === "gravar"){
                document.getElementById("btn-gravar-audio").click();
                gravar_audio.onend = function () {
                    gravando = false;
                };
               }
    };

        if (gravando) {
            gravar_audio.stop();
            return;
        }
        gravar_audio.start();

} else {
    console.log("navegador não apresenta suporte a web speech api");
}
}, false);

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.