Picovoice WordmarkPicovoice Console
Introduction
Introduction
AndroidC.NETFlutterlink to GoiOSJavaNvidia JetsonLinuxmacOSNodejsPythonRaspberry PiReact NativeRustWebWindows
AndroidC.NETFlutterlink to GoiOSJavaNodejsPythonReact NativeRustWeb
SummaryPicovoice LeopardAmazon TranscribeAzure Speech-to-TextGoogle ASRGoogle ASR (Enhanced)IBM Watson Speech-to-Text
FAQ
Introduction
AndroidC.NETFlutterlink to GoiOSJavaNodejsPythonReact NativeRustWeb
AndroidC.NETFlutterlink to GoiOSJavaNodejsPythonReact NativeRustWeb
FAQ
Introduction
AndroidCiOSLinuxmacOSPythonWebWindows
AndroidCiOSPythonWeb
SummaryOctopus Speech-to-IndexGoogle Speech-to-TextMozilla DeepSpeech
FAQ
Introduction
AndroidAngularArduinoBeagleBoneCChrome.NETEdgeFirefoxFlutterlink to GoiOSJavaNvidia JetsonLinuxmacOSMicrocontrollerNodejsPythonRaspberry PiReactReact NativeRustSafariUnityVueWebWindows
AndroidAngularC.NETFlutterlink to GoiOSJavaMicrocontrollerNodejsPythonReactReact NativeRustUnityVueWeb
SummaryPorcupineSnowboyPocketSphinx
Wake Word TipsFAQ
Introduction
AndroidAngularBeagleBoneCChrome.NETEdgeFirefoxFlutterlink to GoiOSJavaNvidia JetsonlinuxmacOSNodejsPythonRaspberry PiReactReact NativeRustSafariUnityVueWebWindows
AndroidAngularC.NETFlutterlink to GoiOSJavaNodejsPythonReactReact NativeRustUnityVueWeb
SummaryPicovoice RhinoGoogle DialogflowAmazon LexIBM WatsonMicrosoft LUIS
Expression SyntaxFAQ
Introduction
AndroidBeagleboneCiOSNvidia JetsonLinuxmacOSPythonRaspberry PiRustWebWindows
AndroidCiOSPythonRustWeb
SummaryPicovoice CobraWebRTC VAD
FAQ
Introduction
AndroidAngularArduinoBeagleBoneC.NETFlutterlink to GoiOSJavaNvidia JetsonMicrocontrollerNodejsPythonRaspberry PiReactReact NativeRustUnityVueWeb
AndroidAngularCMicrocontroller.NETFlutterlink to GoiOSJavaNodejsPythonReactReact NativeRustUnityVueWeb
Picovoice SDK - FAQ
IntroductionSTM32F407G-DISC1 (Arm Cortex-M4)STM32F411E-DISCO (Arm Cortex-M4)STM32F769I-DISCO (Arm Cortex-M7)IMXRT1050-EVKB (Arm Cortex-M7)
FAQGlossary

Picovoice Platform
Angular Quick Start


Platforms

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

Requirements

  • Picovoice Account and AccessKey
  • Node.js 14+
  • Angular 13+
  • npm

Picovoice Account & AccessKey

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

Quick Start

Setup

  1. Install Node.js.

  2. Install the picovoice-angular and web-voice-processor packages.

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

Usage

To initialize Picovoice you'll need a Porcupine keyword file (.ppn) and model file (.pv), as well as a Rhino context file (.rhn) and model file (.pv). Place these files in the project's public directory or generate a base64 representation of the file using the built-in script:

npx pvbase64 -i ${PICOVOICE_INIT_FILE} -o ${BASE64_OUTPUT_FILE}

Add the PicovoiceService to an Angular component using public directory initialization files:

import {Subscription} from "rxjs"
import {PicovoiceService} from "@picovoice/picovoice-angular"
export class VoiceWidget implements OnDestroy {
private wakeWordDetectionSubscription: Subscription;
private inferenceSubscription: Subscription;
private contextInfoSubscription: Subscription;
private isLoadedSubscription: Subscription;
private isListeningSubscription: Subscription;
private errorSubscription: Subscription;
constructor(private picovoiceService: PicovoiceService) {
this.wakeWordDetectionSubscription = picovoiceService.wakeWordDetection$.subscribe(
(wakeWordDetection: PorcupineDetection) => {
// ... use wake word detection result
}
);
this.inferenceSubscription = picovoiceService.inference$.subscribe(
(inference: RhinoInference) => {
// ... use inference result
}
);
this.contextInfoSubscription = picovoiceService.contextInfo$.subscribe(
(contextInfo: string | null) => {
console.log(contextInfo);
}
);
this.isLoadedSubscription = picovoiceService.isLoaded$.subscribe(
(isLoaded: boolean) => {
// .. isLoaded = true
}
);
this.isListeningSubscription = picovoiceService.isListening$.subscribe(
(isListening: boolean) => {
// .. isListening = true
}
);
this.errorSubscription = picovoiceService.error$.subscribe(
(error: string | null) => {
console.error(error);
}
);
}
async ngOnInit() {
const porcupineKeyword = {publicPath: "${PPN_KEYWORD_PATH}"};
const porcupineModel = {publicPath: "${PPN_MODEL_PATH}"};
const rhinoContext = {publicPath: "${RHN_CONTEXT_PATH}"};
const rhinoModel = {publicPath: "${RHN_MODEL_PATH}"};
await this.picovoiceService.init(
accessKey,
porcupineKeyword,
porcupineModel,
rhinoContext,
rhinoModel
);
}
}

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

To start audio recording and processing:

await picovoiceService.start()

To stop audio recording and processing:

await picovoiceService.stop()

Clean up resources explicitly with:

picovoiceService.release();

Custom Keywords and Contexts

Create custom keywords and contexts using the Picovoice Console. Train a Porcupine keyword to obtain a keyword file (.ppn) and a Rhino context to obtain a context file (.rhn). To use them with the Web SDK, train the keywords and contexts for the target platform Web (WASM). These model files can be used directly with publicPath, but, if base64 is preferable, convert to base64 JavaScript variable using the built-in pvbase64 script:

npx pvbase64 -i ${INPUT_BINARY_FILE}.{ppn/rhn} -o ${OUTPUT_BASE64_FILE}.js -n ${BASE64_VAR_NAME}

Similar to the model file (.pv), these files are saved in IndexedDB to be used by Web Assembly. Either base64 or publicPath must be set for each file to initialize Picovoice. If both are set, Picovoice will use the base64 model.

const picovoiceFile = {
publicPath: "${FILE_RELATIVE_PATH}",
// or
base64: "${FILE_BASE64_STRING}",
}

Switching Languages

In order to use Picovoice with different languages you need to use the corresponding model file (.pv) for the desired language. The model files for all supported languages are available in the Porcupine and Rhino GitHub repositories.

Demo

For the Picovoice Angular SDK, there is an 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

  • @picovoice/picovoice-angular on the npm registry
  • @picovoice/web-voice-processor on the npm registry

API

  • @picovoice/picovoice-angular API Docs

GitHub

  • Picovoice Angular SDK on GitHub
  • Picovoice Angular Demo on GitHub

Benchmarks

  • Wake Word Benchmark
  • Speech-to-Intent Benchmark

Further Reading

  • Voice-enabling an Angular App with Wake Words

Was this doc helpful?

Issue with this doc?

Report a GitHub Issue
Picovoice Platform Angular Quick Start
  • Platforms
  • Requirements
  • Picovoice Account & AccessKey
  • Quick Start
  • Setup
  • Usage
  • Custom Keywords and Contexts
  • Switching Languages
  • Demo
  • Setup
  • Usage
  • Resources
Platform
  • Leopard Speech-to-Text
  • Cheetah Streaming Speech-to-Text
  • Octopus Speech-to-Index
  • Porcupine Wake Word
  • Rhino Speech-to-Intent
  • Cobra Voice Activity Detection
Resources
  • Docs
  • Console
  • Blog
  • Demos
Sales
  • Pricing
  • Starter Tier
  • Enterprise
Company
  • Careers
Follow Picovoice
  • LinkedIn
  • GitHub
  • Twitter
  • Medium
  • YouTube
  • AngelList
Subscribe to our newsletter
Terms of Use
Privacy Policy
© 2019-2022 Picovoice Inc.