A Webspeech API foi introduzida no final de 2012 e permite aos desenvolvedores criarem um aplicativo que reconheça a voz do usuário e traduza suas falas em um texto. O Chrome foi o primeiro navegador a implementar tal recurso que atualmente pode ser utilizado também no Safari, Opera e Firefox.
Neste post, você encontra um exemplo de implementação.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Speech</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="js/speech.js"></script>
</head>
<body onload="documentReady()">
<h1>Speech.</h1>
<div id="controls">
<button type="button" id="rec">REC</button>
</div>
</body>
</html>
Uma página simples apenas com um botão para dar início ao reconhecimento de voz.
speech.js
/*
* Controlador da página
*/
PageControl =
{
putResultOnDocument: function(text)
{
document.body.innerHTML += '<p>'+text+'</p>';
}
};
documentReady = function()
{
var controlsDiv = document.getElementById('controls');
var buttonRec = document.getElementById('rec');
/*
* Verificando se o navegador suporta a tecnologia
*/
window.SpeechRecognition = window.SpeechRecognition ||
window.webkitSpeechRecognition ||
null;
if (!window.SpeechRecognition)
{
controlsDiv.innerHTML = '<p>Seu navegador não suporta a speech API</p>';
return 0;
}
/*
* Ação do botão
*/
buttonRec.onclick = function()
{
var recognizer = new window.SpeechRecognition();
recognizer.continuous = true;
/*
* Evento disparado quando uma sequencia é reconhecida
*/
recognizer.onresult = function(event)
{
var text = '';
for (var i = event.resultIndex; i < event.results.length; i++) {
if (event.results[i].isFinal) {
text += event.results[i][0].transcript;
//text += event.results[i][0].transcript + ' (Confidence: ' + event.results[i][0].confidence + ')';
PageControl.putResultOnDocument(text);
} else {
text += event.results[i][0].transcript;
}
}
}
// Inicia o reconhecimento de voz
recognizer.start();
}
}
Não esqueça de aumentar o volume do microfone para testar o código. Mais detalhes sobre compatibilidade aqui.
exemplo não funciona
ResponderExcluir