Picovoice SDK
React Web Quick Start

Platforms

• Chrome & Chromium-based browsers
• Edge
• Firefox
• Safari

Requirements

• Picovoice Account and AccessKey
• Node.js 16+
• React 17.0+
• npm

Picovoice Account & AccessKey

Signup or login to Picovoice Console to obtain your AccessKey. Make sure to keep your AccessKey secret.

Quick Start

Setup

1. Install Node.js .

2. Install the npm packages:

   • picovoice-react
   • web-voice-processor

npm install @picovoice/picovoice-react @picovoice/web-voice-processor

Usage

To initialize Picovoice, you'll need a Porcupine keyword file (.ppn) and model file (.pv), as well as a Rhino context file (.rhn) and model file (.pv). Place these files in the project's public directory or generate base64 representations of the files using the built-in script:

npx pvbase64 -i ${PICOVOICE_INIT_FILE} -o ${BASE64_OUTPUT_FILE}

Pass the path to the file or use the base64 string:

const picovoiceFile = {
  publicPath: "${FILE_PATH}",
  // or
  base64: "${FILE_BASE64_STRING}"
}

Import and call the usePicovoice Hook, and initialize Picovoice with your AccessKey, porcupineKeyword, porcupineModel, rhinoContext, and rhinoModel:

import React, { useEffect } from "react";
import { usePicovoice } from '@picovoice/picovoice-react';

function VoiceWidget(props) {
  const {
    wakeWordDetection,
    inference,
    contextInfo,
    isLoaded,
    isListening,
    error,
    init,
    start,
    stop,
    release,
  } = usePicovoice();

  const porcupineKeyword = { publicPath: "${PPN_KEYWORD_PATH}" };
  const porcupineModel = { publicPath: "${PPN_MODEL_PATH}" };
  const rhinoContext = { publicPath: "${RHN_CONTEXT_PATH}" };
  const rhinoModel = { publicPath: "${RHN_MODEL_PATH}" };

  useEffect(() => {
    init(
      "${ACCESS_KEY}",
      porcupineKeyword,
      porcupineModel,
      rhinoContext,
      rhinoModel
    );
  }, []);


  useEffect(() => {
    // ... use wake word detection result
  }, [wakeWordDetection]);

  useEffect(() => {
    // ... use inference result
  }, [inference]);

  // ... render component
}

The Hook will take care of microphone access and audio downsampling ( via @picovoice/web-voice-processor ).

To start audio recording and processing:

await start()

To stop audio recording and processing:

await stop()

Allocated resources are automatically freed on unmount, but can also be done explicitly:

await release();

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 (.rhn). To use them with the Web SDK, train the keywords and contexts for the target platform Web (WASM). These model files can be used directly with publicPath, but, if base64 is preferable, convert to base64 JavaScript variable using the built-in pvbase64 script:

npx pvbase64 -i ${INPUT_BINARY_FILE}.{ppn/rhn} -o ${OUTPUT_BASE64_FILE}.js -n ${BASE64_VAR_NAME}

Similar to the model file (.pv), these files are saved in IndexedDB to be used by Web Assembly. Either base64 or publicPath must be set for each file to initialize Picovoice. If both are set, Picovoice will use the base64 model.

const picovoiceFile = {
  publicPath: "${FILE_PATH}",
  // or
  base64: "${FILE_BASE64_STRING}",
}

Switching Languages

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.

Demo

For the Picovoice React SDK, there is a React demo project available on the Picovoice GitHub repository .

Setup

Clone the Picovoice repository from GitHub:

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

Usage

1. Install dependencies:

cd picovoice/demo/react
npm install

2. Run the demo with the start script with a language code to start a local web server hosting the demo in the language of your choice (e.g. de -> German, ko -> Korean). To see a list of available languages, run start without a language code.

npm run start ${LANGUAGE}

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

4. Enter your access key and press on Init Picovoice to start the demo.

Resources