Control por voz con javascript

Control por voz con javascript

El control por voz es una de esas tecnologías que enamora a las personas con solo observarla un par de segundos, hoy te muestro como implementar esta funcionalidad en nuestros proyectos web de manera asombrosamente fácil con la librería annyang de javascript. Además de toda la facilidad que ofrece es bastante liviana (algo que se agradece) y se puede configurar en nuestro idioma para que reconozca palabras propias de habla hispana :D.

En el articulo anterior hablamos sobre la funcionalidad de copiar al portapeles con javascript y hoy volvemos a traer otra funcionalidad que deja a muchos con el buen sabor de boca, reconocimiento de voz.

Antes que nada te muestro un pequeño ejemplo que hice para ver el funcionamiento de la librería, da click en el boton demo y comienza a dar ordenes a la pagina como «reproducir» o «pausar» para jugar con el reproductor de audio que aparece allí (he traido esa cancion en la cabeza todo el dia 😛 )

Ver Demo


¿Sabías que?

¿Necesitas hosting wordpress? WebEmpresa te ofrece un servicio super rápido, excelente soporte en español y certificado SSL gratuito:

WebEmpresa

Para comenzar nos hacemos de la librería para el control por voz, annyang ( Puedes consultar la web de talater para mas información )

Teniendo una estructura html básica nos aseguramos de llamar la libreria.

<script src="dist/annyang.min.js"></script>

ahora un poco de script posterior a esto para activar el control por voz.

Primero que nada nos aseguramos que annyang este correctamente en nuestro entorno.

if (annyang) {

//

}

Posteriormente creamos los comandos que nuestro proyecto sera capaz de reconocer asi como la accion a realizar una vez detectado el comando de voz.

var comandos = {
'comando de voz': function() {
   console.log("ejecutando..");
},
'otor comando de voz': function() {
   console.log("ejecutando..");
}
};

luego debemos agregar estos comandos a annyang.

annyang.addCommands(comandos);

establecemos el lenguaje a español.

annyang.setLanguage('es-MX');

y comenzamos a divertirnos!

annyang.start();

control por voz con javascript

El codigo fuente javascript que hace posible el demo de control de voz es el siguiente.

<script>

if (annyang) {
var comandos = {
'reproducir': function() {

var waitTime = 150;
setTimeout(function () { 
if ($('#reproductor').get(0).paused) {
$('#reproductor').get(0).play();
}
}, waitTime);
console.log("reproducir");
},
'pausar': function() {
$('#reproductor').get(0).pause();
console.log("pausar");
}
};

annyang.addCommands(comandos);

annyang.setLanguage('es-MX');
annyang.start();
}
</script>

Te animas a probarlo en un proyecto?

Diviértete!

 

 

Clic para valorar esta información
[Total: 0 Promedio: 0]