Hotword Activated Angular Application with Porcupine and Web Speech API

On day 36, Let's build an Angular app that is activated by a hotword to run the Web Speech API. We'll use Porcupine Angular SDK.

1. Install the packages
Set up a new Angular project and install the following packages:

yarn add @picovoice/porcupine-angular @picovoice/web-voice-processor

web-voice-processor accesses the microphone and converts the stream of audio data into speech recognition format.
porcupine-angular provides the Angular PorcupineService.

1. Go to GitHub and download the demo repository and git clone https://github.com/Picovoice/porcupine.git cd porcupine/demo/angular-stt yarn yarn start

This will start a server on http://localhost:4200. Upon loading, allow microphone permission. You will need to enter your AccessKey from the Picovoice Console.

Now, the Angular app is able to start with the hotword “Okay Google" and transcribe speech to text with Web Speech API. Web Speech API is only available for Chrome. If you're looking for a transcription engine runs in all modern browsers, check out Picovoice STTs.

Resources:
Original Artcile on Medium
Picovoice Porcupine
WebSpeech API
GitHub Repository for the Tutorial