Estou tentando criar um sistema, para meu site, que inicie ações com comando de voz, mas sem precisar clicar em nada, a única coisa que o usuário vai ter que fazer e não tem jeito é habilitar o microfone. Estou usando a API SpeechRecognition e o mais próximo que consegui foi isso:
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);
Ao carregar a página o primeiro window.addEventListener roda. Ao falar "gravar", ativa o segundo e começa a rodar, então eu falo e escreve no textarea. até aí funcionando normal. O problema é que o primeiro window.addEventListener roda apenas por alguns segundos e depois para de rodar porque o SpeechRecognition fica um tempo e depois para de gravar. No segundo window.addEventListener o SpeechRecognition fica em looping infinito porque eu coloquei um receber_audio.start(); dentro do receber_audio.onend = function () e então força o SpeechRecognition a reiniciar novamente, mas no primeiro window.addEventListener quando eu tentei não funcionou, também tenho um outro problema que é se eu falar outra coisa diferente de gravar, já era! Eu vou ter que recarregar a página novamente para começar a gravar de novo, por isso não coloquei gravar.continuous = true; no primeiro window.addEventListener e sim false, mas preciso que assim que terminar de gravar, volte a gravar novamente. Se eu estiver fazendo muita ganbiarra me avisem. até agora não vi uma forma melhor de trabalhar com comando de voz (de graça) que usando o SpeechRecognition. O problema é que eu não tenho ideia de como o pessoal da google fez para fazer aquele comando "Ok google" quando ainda utilizavam no site deles. Eu só fiquei sabendo que tinha depois que tiraram e pelo que vi foi por que ninguém estava usando.
setTimeout(function() {...})
pra verificar se tua captura de voz ainda está rodando e, se não estiver, reinicia-la, reagendando a mesma no final do setTimeout.setTimeout
pra parar o reconhecimento de voz (o que invocará o.onend
) com um.start()
no evento.onend