Porcupine Wake Word
React Quick Start

Platforms

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

Requirements

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

Picovoice Account & AccessKey

Signup or Login to Picovoice Console to get your AccessKey. Make sure to keep your AccessKey secret.

Quick Start

Setup

1. Install Node.js .

2. Install the npm packages:

   • @picovoice/porcupine-web-react
   • @picovoice/web-voice-processor

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

Usage

Put the model file in the project's public directory or generate a base64 model using the build in script:

npx pvbase64 -i ${PORCUPINE_PARAMS_PATH} -o ${OUTPUT_FILE_PATH}

Create a porcupineModel object with either of the methods above:

const PORCUPINE_MODEL_BASE64 = /* Base64 representation of the `.pv` model file*/;

const porcupineModel = {
   publicPath: "${MODEL_RELATIVE_PATH}", // or
   base64: PORCUPINE_MODEL_BASE64
}

Create a usePorcupine Hook that detects the built-in keywords porcupine and bumblebee:

import React, { useEffect } from "react";
import { usePorcupine } from "@picovoice/porcupine-react";

function VoiceWidget(props) {
  const {
    keywordDetection,
    isLoaded,
    isListening,
    error,
    init,
    start,
    stop,
    release,
  } = usePorcupine();

  const porcupineModel = {publicPath: "${PPN_MODEL_PATH}"};
  
  useEffect(() => {
    init(
      ${ACCESS_KEY},
      [BuiltInKeyword.Porcupine, BuiltInKeyword.Bumblebee],
      porcupineModel
    );
  }, []);

  useEffect(() => {
    if (keywordDetection !== null) {
      // ... use keyword detection result
    }
  }, [keywordDetection]);

  // ... 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

Create custom keywords using the Picovoice Console . Train and download a Porcupine keyword model (.ppn) for the target platform Web (WASM). This model file can be used directly with publicPath, but, if base64 is preferable, convert the .ppn file to a base64 JavaScript variable using the built-in pvbase64 script:

npx pvbase64 -i ${KEYWORD_FILE}.ppn -o ${KEYWORD_BASE64}.js -n ${KEYWORD_BASE64_VAR_NAME}

Similar to the model file (.pv), keyword files (.ppn) are saved in IndexedDB to be used by Web Assembly. Either base64 or publicPath must be set for each keyword to instantiate Porcupine. If both are set, Porcupine will use the base64 model. An arbitrary label is required to identify the keyword once the detection occurs.

const keywordModel = {
  publicPath: "${KEYWORD_RELATIVE_PATH}",
  // or
  base64: "${KEYWORD_BASE64_STRING}",
  label: "${KEYWORD_LABEL}",
}

Then, initialize an instance of Porcupine:

await init(
  "${ACCESS_KEY}",
  [keywordModel],
  porcupineModel,
);

Switching Languages

In order to use Porcupine with other languages, you need to use the corresponding model file (.pv) for the desired language. The model files for all supported languages are available on the Picovoice GitHub repository .

Demo

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

Setup

Clone the Porcupine repository from GitHub:

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

Usage

1. Install dependencies:

cd porcupine/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 Porcupine to start recording for keyword detections.

Resources