Vue Quick Start
- Chrome & Chromium-based browsers
- Picovoice Account and AccessKey
- Node.js 14+
- Vue 2.6.11+, 3.0.0+
Picovoice Account & AccessKey
Signup or Login to Picovoice Console to obtain your
Make sure to keep your
Install Node.js .
Install the picovoice-vue and web-voice-processor packages.
Picovoice you'll need a
Porcupine keyword file (
and model file (
.pv), as well as a
Rhino context file (
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:
Create a Vue Component with
usePicovoice and initialize instance of
To learn how to use
PicovoiceVue with Vue's Composition API, check Picovoice Vue GitHub Repo .
The SDK will take care of microphone access and audio downsampling (
To start audio recording and processing:
To stop audio recording and processing:
Clean up resources explicitly with:
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 (
To use them with the Web SDK, train the keywords and contexts for the target platform
These model files can be used directly with
publicPath, but, if
base64 is preferable, convert to base64
Similar to the model file (
.pv), these files are saved in IndexedDB to be used by Web Assembly.
publicPath must be set for each file to initialize Picovoice. If both are set, Picovoice will use
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.
For the Picovoice Vue SDK, there is a Vue demo project available on the Picovoice GitHub repository .
Clone the Picovoice repository from GitHub:
- Install dependencies and run:
- Open http://localhost:8080 to view it in the browser.