I'm trying to create a system for my site that starts actions with voice commands, but without having to click anything, the only thing that the user has to do and have no way is to enable the microphone. I'm using the SpeechRecognition API and the closest I got was 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 rotates. When I speak "record", it activates the second and starts to rotate, so I speak and write in textarea. until now working normal. The problem is that the first window.addEventListener only runs for a few seconds and then stops running because SpeechRecognition takes a while and then stops recording. In the second window.addEventListener the SpeechRecognition is in infinite looping because I put a receive_audio.start (); inside the receive_audio.onend = function () and then forces the SpeechRecognition to restart again, but in the first window.addEventListener when I tried it did not work, I also have another problem that is if I say something other than burning, it was already! I'm going to have to reload the page again to start recording again, so I did not put record.continuous = true; in the first window.addEventListener and yes false, but I need to as soon as I finish writing, re-write again. If I'm doing a lot of ganbiarra let me know. so far I have not seen a better way to work with voice command (for free) than using SpeechRecognition. The problem is that I have no idea how google folks did to make that "Ok google" command when they were still using it on their site. I just learned I had it after they took it and from what I saw was why no one was using it.