angularPicovoice - Angular Web 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/picovoice-web-angular @picovoice/picovoice-web-en-worker @picovoice/web-voice-processor

Usage

Add the PicovoiceService that uses the built-in keyword picovoice and infers intent from spoken commands within a given context to an Angular component. Subscribe to the keyword and inference events:

import { Subscription } from "rxjs"
import { PicovoiceService } from "@picovoice/picovoice-web-angular"
import { PicovoiceWorkerFactory } from "@picovoice/picovoice-web-en-worker"
export class VoiceWidget {
private keywordDetection: Subscription
private inferenceDetection: Subscription
constructor(private picovoiceService: PicovoiceService) {
this.keywordDetection = picovoiceService.keyword$$.subscribe(
keywordLabel => console.log(`Detected "${keywordLabel}"`)
)
this.inferenceDetection = picovoiceService.inference$.subscribe(
inference => console.log(`Inferred intent: "${inference}"`)
)
}
async ngOnInit() {
const accessKey = ${ACCESS_KEY};
const rhnContextB64 = ${RHN_MODEL_B64}; /* Base64 representation of English language clock_wasm.rhn, omitted for brevity */
await this.picovoiceService.init(
PicovoiceWorkerFactory,
{
accessKey,
porcupineKeyword: {
builtin: "Picovoice",
},
rhinoContext: {
base64: rhnContextB64
},
}
)
}
ngOnDestroy() {
this.keywordDetection.unsubscribe()
this.inferenceDetection.unsubscribe()
this.picovoiceService.release()
}
}

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

Custom Wake Words & Contexts

Create custom wake words and contexts using the Picovoice Console. Train the Porcupine keyword and the Rhino context for the target platform WebAssembly (WASM). Inside the .zip files, there are _b64.txt files which contains the binary models encoded with Base64. Copy the base64 and provide it as an argument to Picovoice:

const accessKey = ${ACCESS_KEY};
const rhnContextB64 = ${RHN_MODEL_B64};
const ppnKeywordB64 = ${PPN_MODEL_B64};
await this.picovoiceService.init(
PicovoiceWorkerFactory,
{
accessKey,
porcupineKeyword: {
base64: ppnKeywordB64,
custom: "${KEYWORD}"
},
rhinoContext: {
base64: rhnContextB64
},
}
)

Non-English Languages

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

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

These worker packages are compatible with the Angular SDK:

Demo

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

Setup

Clone the Picovoice repository from GitHub:

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

Usage

  1. Install dependencies and run:
cd picovoice/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.