Merida Design Blog

Publicado el | Recursos / ,

Annyang: recononicimiento de voz para tu página o aplicación web

Annyang es una pequeña librería javascript que facilita el uso de la API de HTML5 para el reconocimiento de voz, permitiéndole a los usuarios controlar tu aplicación web a través de instrucciones por voz. Soporta multiples lenguajes, no tiene dependencias y pesa solamente 2kb.

Ver demo en Codepen.io


Modo de uso

Para usarlo, solo necesitas definir los comandos que se van a reconocer y las acciones a ejecutar.

<script src="http://cdnjs.cloudflare.com/ajax/libs/annyang/2.2.1/annyang.min.js"></script>
<script>
    // Valida que la librería se encuentra presente
    if (!annyang) return;
    
    // Define los comandos
    var commands = {
        'regresa': function() {
            // Ejecuta la siguiente acción cuando reconoce la palabra 'regresa'
            window.history.back(-1);
        },
        
        'busca *text': function(text) {
            // Aqui colocas tu código para realizar un búsqueda en tu aplicación.
            // La variable "text" contendrá las palabras reconocidas después del texto "busca"
        }
    };
    
    // Agrega los comandos a la librería
    annyang.addCommands(commands);
    
    // Inicia el reconocimiento de voz
    annyang.start();
</script>

Soporte

Lamentablemente, el reconocimiento de voz aún no es soportado por todos los navegadores. Al momento de escribir este artículo solamente se cuenta con soporte en Chrome Escritorio, Chrome Android y Opera.

Debido a que el soporte no es amplio, no es recomendable basar el funcionamiento de tu aplicación en comandos de voz, pero si puede ser un valor agregado para los usuarios que ingresen desde un navegador con soporte.


Demo

Para mostrar el funcionamiento, hice un pequeño demo en codepen que te permite seleccionar el color del fondo mediante comando de voz.

Recuerda que solo funcionará en Chrome y Opera.

Ejemplo de Reconocimiento de voz en codepen.io

Actualización: Eliminé el demo porque causaba problemas con la petición del permiso del micrófono a causa el iframe, para ver el ejemplo ingresa al enlace de arriba. También puedes reproducir el ejemplo copiando en código en un archivo local.

Página: https://www.talater.com/annyang/



Publicaciones que pueden interesarte

    Deja un comentario

      tope
    Derechos Reservados, Merida Design 2017
    %d bloggers like this: