Picovoice - Vue Web Quick Start

Wake Word Detection
Offline Hotword Detection
Local Voice Commands
Always Listening
Voice Activation
NLU
Follow-on command

Requirements

yarn (or npm)
Secure browser context (i.e. HTTPS or localhost)

Compatibility

Chrome, Edge
Firefox
Safari

Install the NPM packages

Using Picovoice with Vue requires installing three packages: the binding package, @picovoice/picovoice-web-vue, the language-specific web worker package (e.g. @picovoice/picovoice-web-en-worker), and the @picovoice/web-voice-processor.

Use yarn or npm to install the packages to your project:

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

Demo application

There is a Vue demo project available on the Picovoice GitHub repository. The demo project was bootstrapped with Vue CLI.

Clone Picovoice GitHub repository

If using SSH, clone the Picovoice repository with:

git clone --recurse-submodules [email protected]:Picovoice/picovoice.git

If using HTTPS, then type:

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

Install dependencies and run

Use yarn or npm to install the demo dependencies and start it:

yarn
yarn start

(or)

npm install
npm run start

Open http://localhost:8080 to view it in the browser.

Try Picovoice SDK

Say the wake word "Picovoice", followed by a phrase in the "Alarm Clock" context, e.g.:

"Picovoice, Set a timer for ten seconds"

Rhino's inference result will appear:

{
  "isFinalized": true,
  "isUnderstood": true,
  "intent": "setTimer",
  "slots": { "minutes": "1" }
}

The engine will reset to Porcupine, and it will once again be listening for the wake phrase "Picovoice". Try another interaction, and this time use a phrase outside of the Rhino context:

"Picovoice, tell me a joke"

{ "isFinalized": true, "isUnderstood": false, "intent": null, "slots": {} }

Clock context YAML source

context:
  expressions:
    setAlarm:
      - "set (a, an, the) [alarm, timer] for $pv.TwoDigitInteger:hours [hour, hours] (and) $pv.TwoDigitInteger:minutes [minute, minutes] (and) $pv.TwoDigitInteger:seconds [second, seconds]"
      - "set (a, an, the) [alarm, timer] for $pv.TwoDigitInteger:hours [hour, hours] (and) $pv.TwoDigitInteger:minutes [minute, minutes]"
      - "set (a, an, the) [alarm, timer] for $pv.TwoDigitInteger:hours [hour, hours] (and) $pv.TwoDigitInteger:seconds [second, seconds]"
      - "set (a, an, the) [alarm, timer] for $pv.TwoDigitInteger:hours [hour, hours]"
      - "set (a, an, the) [alarm, timer] for $pv.TwoDigitInteger:minutes [minute, minutes] (and) $pv.TwoDigitInteger:seconds [second, seconds]"
      - "set (a, an, the) [alarm, timer] for $pv.TwoDigitInteger:minutes [minute, minutes]"
      - "set (a, an, the) [alarm, timer] for $pv.TwoDigitInteger:seconds [second, seconds]"
      - "$pv.TwoDigitInteger:hours [hour, hours] (and) $pv.TwoDigitInteger:minutes [minute, minutes] (and) $pv.TwoDigitInteger:seconds [second, seconds]"
      - "$pv.TwoDigitInteger:hours [hour, hours] (and) $pv.TwoDigitInteger:minutes [minute, minutes]"
      - "$pv.TwoDigitInteger:hours [hour, hours] (and) $pv.TwoDigitInteger:seconds [second, seconds]"
      - "$pv.TwoDigitInteger:hours [hour, hours]"
      - "$pv.TwoDigitInteger:minutes [minute, minutes] (and) $pv.TwoDigitInteger:seconds [second, seconds]"
      - "$pv.TwoDigitInteger:minutes [minute, minutes]"
      - "$pv.TwoDigitInteger:seconds [second, seconds]"
    reset:
      - "reset (the) (timer)"
    pause:
      - "[pause, stop] (the) (timer)"
    resume:
      - "resume (the) (timer)"