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:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

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.

Ver ejemplo en funcionamiento

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.

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (4 votos, promedio: 5,00 de 5)
Cargando…

Comparte en las redes sociales

Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*