Hi Friends. Till now, We saw the various type of validation in the previous posts. Here comes the most interesting part that you will enjoy for sure. That's the speech recognition that works on any languages has, no dependencies and its just 2KB in size.
Its a simple small java script library that lets your users can control your site with their voice commands,
It works perfect on all updated browsers that support speech recognition. Now let's try something for real, Here we will see how to create a ToDoList App step by step,
Step1:
It runs only on the server. so you have to install the server on your system.
Npm users: npm install http-server -g
Alternative : It works on servers like XAMPP & WAMP Etc.
Step2:
You have to enable the pop-ups
//Click to Access your microphone
//Click to allow
Let's go to the coding part :
1.Install AngularJS And annyang JS
For NPM users,
1. npm install angularjs -g
2. npm install annyang -g
others,
1. Angularjs
2. Annyang
2.Add Library Files
3.Body
4.Javascript File
<var myApp=angular.module("myApp",[]);
By using this script, you can navigate through any other pages by the voice commands easily. Also you can control the various functionalities.
How it works?
1.say New Item "Anything" It will be any word that gives some meaning.
2. say Check Number 'any number that are in the list'
3. say Remove Number 'any number that are in the list'
4. say check number 'any number that are in the list' & say Clear Selected to delete the selected iteams.
Its a simple small java script library that lets your users can control your site with their voice commands,
It works perfect on all updated browsers that support speech recognition. Now let's try something for real, Here we will see how to create a ToDoList App step by step,
Step1:
It runs only on the server. so you have to install the server on your system.
Npm users: npm install http-server -g
Alternative : It works on servers like XAMPP & WAMP Etc.
Step2:
You have to enable the pop-ups
//Click to Access your microphone
//Click to allow
Let's go to the coding part :
1.Install AngularJS And annyang JS
For NPM users,
1. npm install angularjs -g
2. npm install annyang -g
others,
1. Angularjs
2. Annyang
2.Add Library Files
<script type="text/javascript" src="Lib/angular.min.js"></script>
<script type="text/javascript" src="Lib/annyang.min.js"></script>
3.Body
<div ng-controller="ToDoController">
<form name="frm" ng-submit="addTodo()">
<div class="form-group">
<label for="exampleInputNewItem">Say NewItem</label>
<input type="text" class="form-control" id="exampleInputEmail1" ng-model="newTodo" name="newtodo" >
</div>
<button ng-disabled="frm.$invalid" class="btn btn-success">Go</button>
</form>
<br>
<button ng-click="clearselected()" class="btn btn-danger"> Clear selected
</button>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span ng-class="{'done':todo.done }">
{{$index+1}} {{todo.title}}
</span>
</li>
</ul>
</div>
<form name="frm" ng-submit="addTodo()">
<div class="form-group">
<label for="exampleInputNewItem">Say NewItem</label>
<input type="text" class="form-control" id="exampleInputEmail1" ng-model="newTodo" name="newtodo" >
</div>
<button ng-disabled="frm.$invalid" class="btn btn-success">Go</button>
</form>
<br>
<button ng-click="clearselected()" class="btn btn-danger"> Clear selected
</button>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span ng-class="{'done':todo.done }">
{{$index+1}} {{todo.title}}
</span>
</li>
</ul>
</div>
4.Javascript File
<var myApp=angular.module("myApp",[]);
//Creating a TODo
myApp.controller('ToDoController',['$scope',function($scope){
$scope.todos=[
{ 'title':'This is rajkumar',
'done' :false
}
];
$scope.addTodo=function(){
$scope.todos.push(
{
'title':$scope.newTodo,
'done':false
});
$scope.done="";
};
$scope.clearselected=function(){
$scope.todos=$scope.todos.filter(function(item){
return !item.done
})
};
//Voice command
var commands={
'new item *val' : function(val){
$scope.newTodo=val;
$scope.addTodo();
$scope.$apply();
},
'check number *val' :function(val){
$scope.todos[parseInt(val)-1].done=true;
$scope.$apply();
},
'remove number *val':function(val){
$scope.todos.splice(parseInt(val)-1,1)
$scope.$apply();
},
'clear Selected':function(){
$scope.clearselected();
$scope.$apply();
},
}
annyang.addCommands(commands);
annyang.debug();
annyang.start();
}]);
By using this script, you can navigate through any other pages by the voice commands easily. Also you can control the various functionalities.
1.say New Item "Anything" It will be any word that gives some meaning.
2. say Check Number 'any number that are in the list'
3. say Remove Number 'any number that are in the list'
4. say check number 'any number that are in the list' & say Clear Selected to delete the selected iteams.
Thank You..! Have a nice Day
No comments:
Post a Comment