Add a Wake Word to Angular apps in 10 mins

🚀 Best-in-class Voice AI!

Build compliant and low-latency AI apps running within web browsers without sending user data to 3rd party servers.

Learn how to add wake words, like Alexa or Hey Siri, to any Angular app. This tutorial takes 10 minutes or less from the start to a working demo. We learn how to train custom wake word models, like Hey Jarvis, that fit your product, not Big Tech's brand. In this article, we use Picovoice Porcupine Wake Word Engine Angular SDK.

Wake Word Detection is also known as Keyword Spotting, Hotword Detection, Always-Listening Voice Commands, Trigger Word Detection, and Voice Activation.

Setup the Project

Create a new Angular project:

ng new porcupine-angular

Install the dependencies:

npm install @picovoice/porcupine-angular @picovoice/web-voice-processor

Download the Porcupine model (i.e. Deep Neural Network). From the project folder, run the following to turn the binary model into a base64 string. Remember that you need to replace ${DOWNLOADED_MODEL_PATH} with the path to the model you downloaded (e.g. ~/Downloads/porcupine_params.pv on my Ubuntu machine).

npx pvbase64 \
-i ${DOWNLOADED_MODEL_PATH} \
-o src/lib/porcupine_params.js

Run the local server to load the page:

ng serve

Train Wake Word Models

Sign up for Picovoice Console.
Go to the Porcupine Page.
Select English as the language for your model.
Type in Hey Jarvis as the phrase you want to build the model for.

Optionally, you can try it within the browser
Once you are happy, click on the train button.
Select Web (WASM) as the platform.

Click on Download. You should have a .zip file in your download folder now.
Unzip it. Inside the folder, you see a file with the suffix .ppn. That's our model. Transform it into a base64 string. Remember that you need to replace ${DOWNLOADED_PPN_PATH} with the path to downloaded file (e.g. ~/Downloads/Hey-Jarvis_en_wasm_v2_1_0/Hey-Jarvis_en_wasm_v2_1_0.ppn on my Ubuntu machine)

npx pvbase64 \
-i ${DOWNLOADED_PPN_PATH} \
-o src/lib/hey_jarvis.js \
-n heyJarvisKeywordModel

Wire it up

Go to Picovoice Console's dashboard. Copy your AccessKey.

Create voice_widget.component.ts and paste the following into it. It will create an instance of Porcupine. Remember to replace ${ACCESS_KEY} with your AccessKey obtained from Picovoice Console.

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

import { PorcupineService } from '@picovoice/porcupine-angular';

// @ts-ignore
import { modelParams } from '../lib/porcupine_params';
// @ts-ignore
import heyJarvisKeywordModel from '../lib/hey_jarvis';

@Component({
  selector: 'app-voice-widget',
  templateUrl: './voice_widget.component.html',
  styleUrls: ['./voice_widget.component.scss']
})
export class VoiceWidgetComponent implements OnDestroy {
  private keywordSubscription: Subscription;

  detections: Array<string> = [];

  constructor(private porcupineService: PorcupineService) {
    this.keywordSubscription = 
        porcupineService.keywordDetection$.subscribe(
      porcupineSubscription => {
        this.detections = 
            [...this.detections, porcupineSubscription.label];
      });
  }

  ngOnDestroy(): void {
    this.keywordSubscription.unsubscribe();
    this.porcupineService.release();
  }
  
  public async initEngine(): Promise<void> {
    await this.porcupineService.release();
    try {
      await this.porcupineService.init(
        ${ACCESS_KEY},
        {base64: heyJarvisKeywordModel, label: "Hey Jarvis"},
        { base64: modelParams }
      );
      await this.porcupineService.start();
    }
    catch (error: any) {
      
    }
  }
}

Create voice_widget.component.html and paste the following into it.

<div class="voice-widget">
    <h1>VoiceWidget</h1>
    <h3>
      <button class="start-button" (click)="initEngine()">
        Start
      </button>
    </h3>
  
    <ul>
      <li *ngFor="let keywordLabel of detections">
        "{{ keywordLabel }}"
      </li>
    </ul>
</div>

Update app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'porcupine-angular-demo-porcupine';
  show = true;

  toggle(): void {
    this.show = !this.show;
  }
}

Update app.module.ts to include the new component.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { VoiceWidgetComponent } from "./voice_widget.component"

@NgModule({
  declarations: [
    AppComponent,
    VoiceWidgetComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Additional Languages

Porcupine supports many more languages aside from English. To use models in other languages, refer to the quick start.

Source Code