Campo de texto con reconocimiento de voz
En este artículo vamos a ver lo simple que es crear un campo de texto que permita el reconocimiento de la voz. Esta funcionalidad puede resultar muy útil para el usuario disponiendo de la posibilidad de poder decir unas palabras mediante la voz para evitar tener que teclear cada letra. Este sistema se podría emplear en un buscador para nuestra tienda, en un formulario de contacto o en la implementación de un chat.
Como podemos conseguirlo?
En Javascript tenemos una API que podemos utilizar fácilmente en nuestros proyectos para reconocer la voz del usuario.
Crearemos nuestro campo de texto como solemos hacer habitualmente dentro del formulario correspondiente en cualquier parte del <body>. Por ejemplo:
<input type="search" value="" id="search_input" placeholder="Escribe aquí..." />En la cabecera <head> de nuestra página tendremos que incluir la librería jQuery, como por ejemplo:
La clave del asunto viene a continuación. También en la cabecera de tu página debes añadir el siguiente trozo de código:
$(document).ready(function() {
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.lang = "es";
$('#search_input').click(function(event) {
recognition.start();
});
recognition.onresult = function (event) {
finalResult = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
finalResult = event.results[i][0].transcript;
$('#search_input').val(finalResult);
}
}
};
});Estamos inicializando la API de reconocimiento de voz de la siguiente forma:
var recognition = new webkitSpeechRecognition();Definimos la continuidad del momento de hablar, establecemos que cuando el usuario deje de hablar, el reconocimiento de voz llega a su fin con:
recognition.continuous = true;Establecemos el idioma que se debe reconocer. En nuestro caso, nos interesa el español:
recognition.lang = "es";Cuando el usuario haga click en el campo de texto, empezamos el reconocimiento de voz. Eso lo conseguimos con:
$('#search_input').click(function(event) {
recognition.start();
});Finalmente, definimos el evento que debe generarse cuando el usuario termina de hablar:
recognition.onresult = function (event) {
finalResult = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
finalResult = event.results[i][0].transcript;
$('#search_input').val(finalResult);
}
}
};La variable event.resultIndex contiene las palabras reconocidas por la API. Las recorremos para mostrarlas.
Inconvenientes
- No funciona en dispositivos móviles
- En algunos navegadores tampoco acaba de funcionar
Si sabéis de algún plugin o script que permita reconocer la voz en todos los dispositivos y navegadores, no dudes en enviarnos un comentario con esta información.
Autor
¿Buscas trabajo de programador?
8 respuestas a “Campo de texto con reconocimiento de voz”
Deja una respuesta
118 artículos que te podrían interesar
Ver más sobre
Rene P sólo debes repetir el código javascript y cambiar el nombre del search_input del html y javascript, yo en mi caso le puse números search_input1, al otro código search_input2, etc.
Buen dia, probe su demo de reconocimiento de voz a texto y funciona muy bien, solo una question, hay veces que hay que estar dando permisos de acceso al microfono sin detener el reconocimiento, tengo que hacer algo en especifico para que esto no suceda ??. Y excelente me sera de mucha utilidad para adaptarlo a una biblioteca.
Excelente… jajaj nunca creí que fuera tan sencillo jajajajaja muchas gracias chicos una maravilla.
Saludos, un favor, como pudiera hacer para llenar diferentes campos? porque lo probé y siempre me llena el mismo, gracias de antemano.
Hola,
Buena pregunta a la que no tengo una respuesta. Es posible que no sea posible pero dejo la pregunta abierta por si alguien lo sabe.
Saludos
Gracias me servirá de mucho, además una observación, si funciona en móviles, únicamente que por HTTPS.
muy buen aporte, Felicidades¡¡¡
Gracias, muy interesante. No tenia ni idea de que se podia hacer esto tan facilmente, lastima que no funcione con Firefox.