Porcupine - Vue API

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

This document outlines how to integrate the Porcupine wake word engine 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 Porcupine Vue 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/porcupine-web-vue @picovoice/porcupine-web-en-worker @picovoice/web-voice-processor

(or)

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

Language-specific Porcupine web worker packages

These worker packages are compatible with the Vue SDK:

Usage

Porcupine for Vue is a renderless component. Import the Porcupine component and the Porcupine Web Worker component. Bind the worker to Porcupine 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 Porcupine ppn-keyword event is fired.

<template>
  <div class="voice-widget">
    <Porcupine
      v-bind:porcupineFactoryArgs="[
        { builtin: 'Grasshopper', sensitivity: 0.65 },
        { builtin: 'Grapefruit', sensitivity: 0.4 },
      ]"
      v-bind:porcupineFactory="factory"
      v-on:ppn-ready="ppnReadyFn"
      v-on:ppn-keyword="ppnKeywordFn"
      v-on:ppn-error="ppnErrorFn"
    />
    <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 Porcupine from "@picovoice/porcupine-web-vue";
import { PorcupineWorkerFactoryEn } from "@picovoice/porcupine-web-en-worker";

export default {
  name: "VoiceWidget",
  components: {
    Porcupine,
  },
  data: function() {
    return {
      detections: [],
      isError: null,
      isLoaded: false,
      factory: PorcupineWorkerFactoryEn,
    };
  },
  methods: {
    ppnReadyFn: function() {
      this.isLoaded = true;
    },
    ppnKeywordFn: function(data) {
      this.detections = [...this.detections, data.keywordLabel];
    },
    ppnErrorFn: function(data) {
      this.isError = true;
      this.errorMessage = data.toString();
    },
  },
};
</script>

Porcupine Parameters

Porcupine accepts an array of (or a single) PorcupineKeyword object argument(s).

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.

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
}

Events

The Porcupine component will emit the following events:

Event	Data	Description
"ppn-loading"		Porcupine has begun loading
"ppn-ready"		Porcupine has finished loading & the user has granted microphone permission: ready to process voice
"ppn-keyword"	The label of the keyword (e.g. "Grasshopper")	Porcupine has detected a keyword
"ppn-error"	The error that was caught (e.g. "NotAllowedError: Permission denied")	An error occurred while Porcupine or the WebVoiceProcessor was loading

Custom Wake Words

You can create custom wake word models using Picovoice Console. Making Porcupine wake word models for the Web platform requires an Enterprise account.