React Web Quick Start
- Chrome & Chromium-based browsers
- Picovoice Account and AccessKey
- Node.js 14+
- React 17.0+
Picovoice Account & AccessKey
Signup or Login to Picovoice Console to obtain your
Make sure to keep your
Install Node.js .
Install the picovoice-react 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:
usePicovoice Hook using public directory initialization files:
The Hook will take care of microphone access and audio downsampling (
To start audio recording and processing:
To stop audio recording and processing:
Allocated resources are automatically freed on unmount, but can also be done explicitly:
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 React SDK, there is a React demo project available on the Picovoice GitHub repository .
Clone the Picovoice repository from GitHub:
- Install dependencies and run:
- Open http://localhost:3000 to view it in the browser.