Contents hide 1) Implementation 1.1) Angular JS Voice Detection Libraries 2) Setup Layout 3) AngularJS Module 3.1) Web Speech API 3.2) OnResult 3.3) resultIndex 3.4) result 3.5) isFinal 3.6) transcript In this tutorial, We will see how to Add Input Using Angular JS Voice Detection. in this article we will use the Our Main AnjularJS Resource And the other things are pubnub Services And pubnub AngularJS Services Check out the Demo on Angular JS Voice Detection. Demo Get Code Snippet Of Angular JS Voice Detection Code Snippet Implementation Let’s first start with implementing the required files i.e. AnjularJS Resource And the other things are pubnub Services, Pubnub AngularJS Services And Bootstrap 4 for layout <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> Angular JS Voice Detection Libraries <script src="https://cdn.pubnub.com/pubnub-3.15.1.min.js"></script> <script src="https://cdn.pubnub.com/sdk/pubnub-angular/pubnub-angular-3.2.1.min.js"></script> Setup Layout The next thing we will do is to setup the just simple layout for Voice detection. So all we need is one input field and a button. index.html <!-- // declare the Angular app and controller @ app : PubNubAngularApp @ controller : MySpeechCtrl --> <div class="container" ng-app="PubNubAngularApp" ng-controller="MySpeechCtrl"> <!-- Defining The Model @theText--> <textarea ng-model="theText" rows="4" cols="40" class="form-control"></textarea><br> <!-- On Click @dictateIt() --> <button class="btn btn-primary" type="submit" ng-click="dictateIt()" value="Dictate it!" >Dictate it!</button> </div> AngularJS Module After defining the module and controller, the next step will be constructing the module and controller to detect the voice using the angular js libraries. So let’s get into the snippet. Let’s start with defining the angular js module and controller app.js //define angular module @PubNubAngularApp -> @pubnub.angular.service angular.module('PubNubAngularApp', ["pubnub.angular.service"]) //define controller @MySpeechCtrl .controller('MySpeechCtrl', function($rootScope, $scope, Pubnub) { // .... Code ..... } Web Speech API The next thing we will do is, to implement the Voice detection API. The Web Speech API enables you to incorporate voice data into web apps. The Web Speech API has two parts: SpeechSynthesis (Text-to-Speech), and SpeechRecognition (Asynchronous Speech Recognition.) In this Tutorial, we will use SpeechRecognition app.js angular.module('PubNubAngularApp', ["pubnub.angular.service"]) .controller('MySpeechCtrl', function($rootScope, $scope, Pubnub) { $scope.theText = "Don't just stand there, say something!"; // On Click of a button $scope.dictateIt = function () { $scope.theText = ""; // Construct the api function.. var recognition = new webkitSpeechRecognition(); //onresult property recognition.onresult = function (event) { $scope.$apply(function() { // resultIndex read-only property for (var i = event.resultIndex; i < event.results.length; i++) { if (event.results[i].isFinal) { // result event $scope.theText += event.results[i][0].transcript; } } }); }; recognition.start(); }; }); OnResult The onresult property of the SpeechRecognition interface represents an event handler that will run when the speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app (when the result event fires.) ... recognition.onresult = function (event) { ... }; ... resultIndex The resultIndex read-only property of the SpeechRecognitionEvent interface returns the lowest index value result in the SpeechRecognitionResultList “array” that has actually changed. The SpeechRecognitionResultList object is not an array, but it has a getter that allows it to be accessed by array syntax. ... var i = event.resultIndex; ... result The result event of the Web Speech API is fired when the speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app ... event.results[i] ... isFinal The isFinal read-only property of the SpeechRecognitionResult interface is a Boolean that states whether this result is final (true) or not (false) — if so, then this is the final time this result will be returned; if not, then this result is an interim result, and may be updated later on. ... if (event.results[i].isFinal) { ... } ... transcript The transcript read-only property of the SpeechRecognitionResult interface returns a string containing the transcript of the recognized word(s). For continuous recognition, leading or trailing whitespace will be included where necessary so that concatenation of consecutive SpeechRecognitionResults produces a proper transcript of the session. ... $scope.theText += event.results[i][0].transcript; ... Get Some More Details On Web Search API Get Some More AngularJS Articles Here! Share this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblr Related Tags: angular-directives, angularjs, bootstrap, html5, JavaScript, web api