Picovoice - Web Quick Start

Wake Word Detection
Offline Hotword Detection
Always Listening
Voice Activation
Web
WebAssembly
NLU

Compatibility

Chrome, Edge
Firefox
Safari

Requirements

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

Installing WebVoiceProcessor and a Worker package

Using the Picovoice SDK for Web (with a microphone) requires installing two packages. The web-voice-processor package, @picovoice/web-voice-processor, and the language-specific web worker package (e.g. @picovoice/picovoice-web-en-worker).

Using yarn or npm

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

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

(or)

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

Using CDN / script tags

You can directly import the libraries using the IIFE version via unpkg CDN:

<script src="https://unpkg.com/@picovoice/picovoice-web-en-worker/dist/iife/index.js"></script>
<script src="https://unpkg.com/@picovoice/web-voice-processor/dist/iife/index.js"></script>

This will add PicovoiceWebEnWorker and WebVoiceProcessor as globals on window.

Demo application

There is a Web demo project available on the Picovoice GitHub repository.

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:

cd picovoice/demo/web
yarn
yarn start

(or)

cd picovoice/demo/web
npm install
npm run start

Open http://localhost:5000 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)"