Comunidad de diseño web y desarrollo en internet online

Input con comandos de voz en HTML5

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 el siguiente demo con Google Chrome y haz clic en el ícono del micrófono para activar este servicio.



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

Código :

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

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

Código :

<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.

Código :

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

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

Código :

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

Aún está desarrollándose, existen errores al momento de detectar lo que dices pero para eso nos dieron mandíbulas, para vocalizar.

Cualquier duda, comentario o sugerencia, sígueme en twitter (@kinduff), o bien, dejame un comentario aquí.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate