Annyang es una pequeña librería en javascript que permite a los visitantes controlar los sitios web usando comandos de voz. La librería es muy ligera, pesa menos de 1K, no tiene dependencias y puede ser usada y modificada a libertad.
El plugin es compatible con browsers que soporten reconocimeto de voz como google chrome, es muy fácil de usar solo agregar la referencia al archivo y llamar una función.
- <script src="//cdnjs.cloudflare.com/ajax/libs/annyang/0.2.0/annyang.min.js"></script> <script> if (annyang) { // Let's define our first command. First the text we expect, and then the function it should call var commands = { 'show tps report': function() { $('#tpsreport').animate({bottom: '-100px'}); } }; // Initialize annyang with our commands annyang.init(commands); // Start listening. You can call this here, or attach this call to an event, button, etc. annyang.start(); } </script>
El arreglo de comandos es muy simple, colocas la frase y la función que se ejecutará cuando el usuario la pronuncie en el micrófono. Desde todo punto de vista algo para tener en cuenta.
¿Qué pasa con los comandos más complicadas?
annyang entiende comandos con variables con nombre , símbolos de , y palabras opcionales .
Utilice variables con nombre de uno los argumentos de palabras en su comando.
Use símbolos para capturar texto de varias palabras al final de su mandato (codicioso).
Use palabras o frases opcionales para definir una parte de la orden como opcional.
<script>
var commands = {
// annyang will capture anything after a splat (*) and pass it to the function.
// e.g. saying "Show me Batman and Robin" is the same as calling showFlickr('Batman and Robin');
'show me *term': showFlickr,
// A named variable is a one word variable, that can fit anywhere in your command.
// e.g. saying "calculate October stats" will call calculateStats('October');
'calculate :month stats': calculateStats,
// By defining a part of the following command as optional, annyang will respond to both:
// "say hello to my little friend" as well as "say hello friend"
'say hello (to my little) friend': greeting
};
var showFlickr = function(term) {
var url = 'http://api.flickr.com/services/rest/?tags='+tag;
$.getJSON(url);
}
var calculateStats = function(month) {
$('#stats').text('Statistics for '+month);
}
var greeting = function() {
$('#greeting').text('Hello!');
}
</script>
No hay comentarios. :
Publicar un comentario