A good example of a match might be "noun cat". We'll listen for the user to say the word "noun", followed by a named variable (e.g., :noun), which represents a one word argument. Let's break down the first of these ( noun :noun) in more detail. To create commands, we'll build a commands object of string keys with functions that are executed when the command is recognized. You can read more about Annyang's API documentation here. When we want to set up speech recognition in a component, we can call the Speech service's init ( ) method, which in turn calls Annyang's addCommands ( ) method to establish what we're listening for. These are the voice commands that we'll listen for. The service will be generated but you'll see a warning in the command line stating that it must be provided to be used. To learn more about testing in Angular, check out the following articles on testing components and testing services. You can add your own tests, or choose not to generate these files by adding the -no -spec flag to ng g commands. Note: For brevity, this tutorial will not cover testing. We can use ng g as a shortcut for ng generate. Generate a ServiceĬreate a new service using the Angular CLI from the root of the madlibs project: $ ng g service speech Once we have a service that interfaces with speech recognition, we can build a component that listens to the user's voice and stores the words they speak for use in the app. The first thing we'll do is create a service in our Angular app that we can use to interact with the Web Speech API via the Annyang library. Implementing a form component allowing users to speak or type words to use in the madlib story.Integrating the Annyang library for speech recognition support.In thais part, we will cover the following: The completed Madlibs app code can be found at this GitHub repo. We'll cover reactive programming with Reactive Extensions (Rx*), JS framework component interaction in Angular, and speech recognition with the Web Speech API.
In this tutorial series, we'll learn how to build a small app with some big concepts.