Input con comandos de voz en HTML5

palabras / Facebook / Twitter / Enlace / Comentar

Este artículo fue originalmente publicado en Cristalab, un portal dónde colaboro ocasionalmente.

Desde la versión de Google Chrome 11 se implementó un servicio de análisis de voz. Con esto es posible hablarle a un campo de texto y este mismo escribirá lo que nosotros decimos. Todo esto gracias a HTML5.

Si no me explico bien abre esta página con Google Chrome y haz clic en el ícono del micrófono micrófono para activar este servicio.

Gracias a las funciones de esta utilidad puedo ejecutar una función cuando detecto que terminas de hablar, para despues poder utilizar ese texto como una variable.

La variable la consigo por medio de jQuery para así poder manipularla mucho más fácil. La variable es .

¿Impresionado? Yo también. Para agregar este campo simplemente tendremos que agregar el siguiente valor a nuestro input: x-webkit-speech.

<input type="text" x-webkit-speech />

Para detectar cuando alguien dejó de hablar lo hacemos con onwebkitspeechchange, como muestra el ejemplo.

<input id="hablame" type="text" x-webkit-speech speech error onwebkitspeechchange="funcionGenial();"/>

Si quieremos obtener la variable, el método más simple es con jQuery, de la siguiente manera.

var variable = $("#hablame").val();

Para detectar incapacidad de navegador de ejecutar esta utilidad, lo podemos hacer con la siguiente línea.

if (document.createElement("input").webkitSpeech === undefined) {
   alert("Lo siento, tu navegador no soporta esta función.");
}

Tus dedos son tu límite, utiliza estas funciones para el bien y haz del mundo web, un mundo mejor.


Comentarios

Copyright © 2012-2013 AbarcaRodriguez.com