Speech recognition in AngularJS
Posted By : Ankit Singh Rana | 02-Sep-2017
Speech recognition is certainly a useful way to give user more flexibility while using the app. Whether user is on mobile or a desktop browser, speech recognition will always come in handy. Now annyang is great way to do that. It uses devices ’s microphone and is a very lightweight library.
Steps : 1
Add it in your HTML
<script src="annyang-master/annyang.min.js"></script>
Step : 2
Now "new command" are the exact words user need to speak, and *command is anything user says after that. You might want to save it in a scope, to reflect that in a text box or something. Also use $scope.$apply() to update the modal binding.
var commands = {
'new command *command' : function(command){ // *command is anything user says.
console.log(command);
$scope.newCommand = command; // save it in the scope
$scope.$apply(); // Apply change to model manually
}
}
Step 3 :
Now last step is tell annyang about the commands and start litsening. Also, you might want to start listening on a click of a button or something.
annyang.addCommands(commands); // Add those command
annyang.debug(); // Debug mode
annyang.start(); // // Start listening.
Complete Code :-
if(annyang){
var commands = {
'new command *command' : function(command){ // *command is anything user says.
console.log(command);
$scope.newCommand = command; // save it in the scope
$scope.$apply(); // Apply change to model manually
}
}
annyang.addCommands(commands); // Add those command
annyang.debug(); // Debug mode
annyang.start(); // // Start listening.
}
The above code displays how to use it with AngularJs, however the same libraby can also be used with JQuery or pure javascript as well.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Ankit Singh Rana
Ankit is a UI Developer having experience in Angular 2, Angular JS, JavaScript, HTML5 and CSS3. His hobbies includes playing video Games and traveling.