angularPorcupine - Angular Quick Start

Platforms

  • Chrome & Chromium-based browsers
  • Edge
  • Firefox
  • Safari

Requirements

Picovoice Account & AccessKey

Signup or Login to Picovoice Console to get your AccessKey. Make sure to keep your AccessKey secret.

Quick Start

Setup

  1. Install Node.js.

  2. Install the npm packages:

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

Usage

Add the PorcupineService to an Angular component. Subscribe to the keyword event for the built-in keywords porcupine and bumblebee:

import { Subscription } from "rxjs"
import { PorcupineService } from "@picovoice/porcupine-web-angular"
import { PorcupineWorkerFactory } from "@picovoice/porcupine-web-en-worker"
export class VoiceWidget {
private keywordDetection: Subscription
constructor(private porcupineService: PorcupineService) {
this.keywordDetection = porcupineService.keyword$.subscribe(
keywordLabel => console.log(`Detected "${keywordLabel}"`)
)
}
async ngOnInit() {
const accessKey = ${ACCESS_KEY};
const keywords = [
{ builtin: "porcupine" },
{ builtin: "bumblebee" }
];
await this.porcupineService.init(
PorcupineWorkerFactory,
{ accessKey, keywords }
)
}
ngOnDestroy() {
this.keywordDetection.unsubscribe()
this.porcupineService.release()
}
}

The PorcupineService will take care of microphone access and audio downsampling (via @picovoice/web-voice-processor).

Custom Keywords

Create custom keyword using the Picovoice Console. Train the keyword model for the target platform WebAssembly (WASM). Inside the .zip file, there is a _b64.txt file which contains the binary model encoded with Base64. Copy the base64 and provide it as an argument to PorcupineService:

const accessKey = ${ACCESS_KEY};
const DEEP_SKY_BLUE_PPN_64 = ${BASE64_MODEL} /* Base64 representation of deep_sky_blue.ppn */
const keywords = [
{ base64: DEEP_SKY_BLUE_PPN_64, custom: "Deep Sky Blue" }
];
await this.porcupineService.init(
PorcupineWorkerFactory,
{ accessKey, keywords }
)

Non-English Languages

Import { PorcupineWorkerFactory } from the @picovoice/porcupine-web-xx-worker series of packages, where xx is the two-letter language code:

import { PorcupineWorkerFactory } from "@picovoice/porcupine-web-xx-worker";

These worker packages are compatible with the Angular SDK:

Demo

For the Porcupine Angular SDK, there is a Angular demo project available on the Porcupine GitHub repository.

Setup

Clone the Porcupine repository from GitHub:

git clone --recurse-submodules https://github.com/Picovoice/porcupine.git

Usage

  1. Install dependencies and run:
cd porcupine/demo/angular
npm install
npm run start
  1. Open http://localhost:4200 to view it in the browser.

Resources

Packages

API

GitHub

Benchmark

Further Reading


Issue with this doc? Please let us know.