Voice Recognition

and

JavaScript

Lightnings Talks @ Frontend Bucharest
TTC: 5'

Contents

Why

 

SpeechRecognition() API

 

Annyang

 

Can I use

 

The end

Why (Magic Mirror)

SpeechRecognition() API

var myRecognition = new SpeechRecognition();
//properties
//myRecognition.grammars
myRecognition.maxAlternatives = 1;
myRecognition.continuous = true;
myRecognition.lang = 'en-US';
//myRecognition.serviceURI

//events
myRecognition.onstart = function (event) {}
myRecognition.onend = function (event) {}
myRecognition.onresult = function (event) {}

//methods
myRecognition.abort();
myRecognition.start();
myRecognition.stop();

//onresult
event.results: {
    0: {
        0: {
            confidence: 0.695017397403717,
            transcript: "Why did the chicken cross the road?"
        },
        isFinal:true,
        length:1
    },
    length:1
}

Annyang

<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.1.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'});
    }
  };

  // Add our commands to annyang
  annyang.addCommands(commands);

  // Start listening. You can call this here, or attach this call to an event, button, etc.
  annyang.start();
}
</script>

Annyang

<script>
var commands = {
  // annyang will capture anything after a splat (*) and pass it to the function.
  // e.g. saying "Show me Batman and Robin" will call showFlickr('Batman and Robin');
  'show me *tag': 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(tag) {
  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>

Annyang

annyang.start();
annyang.abort();
annyang.pause();
annyang.resume();
annyang.setLanguage(language);

var commands = {'hello :name': helloFunction, 'howdy': helloFunction};
annyang.addCommands(commands);

// Remove all existing commands
annyang.removeCommands();

// Don't respond to howdy or hi
annyang.removeCommands(['howdy', 'hi']);

annyang.addCallback('resultMatch', function (userSaid, commandText, phrases) {
  console.log(userSaid); // sample output: 'hello'
  console.log(commandText); // sample output: 'hello (there)'
  console.log(phrases); // sample output: ['hello', 'halo', 'yellow', 'polo', 'hello kitty']
});



Can I use

The end

Made with Slides.com