Picovoice SDK - Vue API

Wake Word Engine
Offline Voice Commands
Local Speech Recognition
Always Listening
NLU
npm

This document outlines how to integrate the Picovoice SDK within an application using its Vue API.

Requirements

Vue 3
yarn (or npm)

Compatibility

Chrome, Edge
Firefox
Safari

The Picovoice SDKs for Web are powered by WebAssembly (WASM), the Web Audio API, and Web Workers.

All modern browsers (Chrome/Edge/Opera, Firefox, Safari) are supported, including on mobile. Internet Explorer is not supported.

Using the Web Audio API requires a secure context (HTTPS connection), with the exception of localhost, for local development.

Installation

Use npm or yarn to install the package and its peer dependencies. Each spoken language (e.g. 'en', 'de') is a separate package. For this example we'll use English:

yarn add @picovoice/picovoice-web-vue @picovoice/picovoice-web-en-worker @picovoice/web-voice-processor

(or)

npm install @picovoice/picovoice-web-vue @picovoice/picovoice-web-en-worker @picovoice/web-voice-processor

Language-specific Picovoice web worker packages

These worker packages are compatible with the Vue SDK:

Usage

Picovoice for Vue is a renderless component. Import the Picovoice component and the Picovoice Web Worker component. Bind the worker to Picovoice like the demo .vue file below.

In this example we're passing in two keywords: "Grasshopper" and "Grapefruit" with sensitivities 0.65 and 0.4, respectively. The demo maintains an array of detections which is updated every time the Picovoice ppn-keyword event is fired.

<template>
  <div class="voice-widget">
    <Picovoice
      v-bind:picovoiceFactoryArgs="{ start: true, porcupineKeyword:
    'Picovoice', rhinoContext: { base64: '... Base64 representation of a .rhn file ...'}"
      v-bind:picovoiceFactory="factory"
      v-on:pv-init="pvInitFn"
      v-on:pv-ready="pvReadyFn"
      v-on:ppn-keyword="pvKeywordFn"
      v-on:rhn-inference="pvInferenceFn"
      v-on:pv-error="pvErrorFn"
    />
    <h3>Keyword Detections:</h3>
    <ul v-if="detections.length > 0">
      <li v-for="(item, index) in detections" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import Picovoice from "@picovoice/picovoice-web-vue";
import { PicovoiceWorkerFactoryEn } from "@picovoice/picovoice-web-en-worker";

export default {
  name: "VoiceWidget",
  components: {
    Picovoice,
  },
  data: function() {
    return {
      detections: [],
      isError: null,
      isLoaded: false,
      factory: PicovoiceWorkerFactoryEn,
    };
  },
  methods: {
    pvInitFn: function () {
      this.isError = false;
    },
    pvReadyFn: function () {
      this.isLoaded = true;
      this.isListening = true;
      this.engine = 'ppn'
    },
    pvKeywordFn: function (keyword) {
      this.detections = [...this.detections, keyword];
      this.engine = 'rhn'
    },
    pvInferenceFn: function (inference) {
      this.inference = inference;
      this.engine = 'ppn'
    },
    pvErrorFn: function (error) {
      this.isError = true;
      this.errorMessage = error.toString();
    },
  },
};
</script>

Picovoice Parameters (PicovoiceFactoryArgs)

To configure Picovoice to listen for specific wake word and NLU context, use picovoiceFactoryArgs:

export type PicovoiceFactoryArgs = {
  porcupineKeyword: PorcupineKeyword
  rhinoContext: RhinoContext
  start?: boolean
}

Porcupine Keyword

Picovoice accepts a single PorcupineKeyword object argument(s), where PorcupineKeyword can be either PorcupineKeywordBuiltin or PorcupineKeywordCustom:

export type PorcupineKeywordBuiltin = {
  /** Name of a builtin keyword for the specific language (e.g. "Grasshopper" for English, or "Ananas" for German) */
  builtin: string
  /** Value in range [0,1] that trades off miss rate for false alarm */
  sensitivity?: number
}

English	French	German	Spanish
"Americano" "Blueberry" "Bumblebee" "Grapefruit" "Grasshopper" "Hey Google" "Hey Siri" "Jarvis" "Okay Google" "Picovoice" "Porcupine" "Terminator"	"Framboise" "Mon Chouchou" "Parapluie" "Perroquet" "Tournesol"	"Ananas" "Heuschrecke" "Himbeere" "Leguan" "Stachelschwein"	"Emparedado" "Leopardo" "Manzana" "Murcielago"

If you simply pass a string of a builtin keyword instead of an object, that will also work.

Use PorcupineKeywordCustom for custom keywords:

export type PorcupineKeywordCustom = {
  /** Base64 representation of a trained Porcupine keyword (`.ppn` file) */
  base64: string
  /** An arbitrary label that you want Picovoice to report when the detection occurs */
  custom: string
  /** Value in range [0,1] that trades off miss rate for false alarm */
  sensitivity?: number
}

Rhino Context

The PicovoiceFactoryArgs also accepts a rhinoContext field of type type RhinoContext:

export type RhinoContext = {
  /** Base64 representation of a trained Rhino context (`.rhn` file) */
  base64: string
  /** Value in range [0,1] that trades off miss rate for false alarm */
  sensitivity?: number
}

Events

The Picovoice component will emit the following events:

Event	Data	Description
"pv-loading"		Picovoice has begun loading
"pv-ready"		Picovoice has finished loading & the user has granted microphone permission: ready to process voice
"ppn-keyword"	The keyword	Porcupine has detected the keyword ( word, wake up word, hotword).
"rhn-inference"	The inference object (see above for examples)	Rhino has concluded the inference.
"pv-error"	The error that was caught (e.g. "NotAllowedError: Permission denied")	An error occurred while Picovoice or the WebVoiceProcessor was loading