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

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.

<!-- 
  // 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

//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

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!