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
Voice Recognition and JavaScript
By ciprian chichirita
Voice Recognition and JavaScript
5 minutes presentation about Speech Recognition API
- 848