Picovoice Wordmark
Start Building
Introduction
Introduction
AndroidC.NETiOSLinuxmacOSNode.jsPythonRaspberry PiWebWindows
AndroidC.NETiOSNode.jsPythonWeb
SummaryPicovoice picoLLMGPTQ
Introduction
AndroidC.NETFlutteriOSJavaLinuxmacOSNode.jsPythonRaspberry PiReactReact NativeRustWebWindows
AndroidC.NETFlutteriOSJavaNode.jsPythonReactReact NativeRustWeb
SummaryPicovoice LeopardAmazon TranscribeAzure Speech-to-TextGoogle ASRGoogle ASR (Enhanced)IBM Watson Speech-to-TextWhisper Speech-to-Text
FAQ
Introduction
AndroidC.NETFlutteriOSJavaLinuxmacOSNode.jsPythonRaspberry PiReactReact NativeRustWebWindows
AndroidC.NETFlutteriOSJavaNode.jsPythonReactReact NativeRustWeb
SummaryPicovoice Cheetah
FAQ
Introduction
AndroidC.NETiOSLinuxmacOSNode.jsPythonRaspberry PiWebWindows
AndroidC.NETiOSNode.jsPythonWeb
SummaryAmazon PollyAzure TTSElevenLabsOpenAI TTSPicovoice Orca
Introduction
AndroidCiOSLinuxmacOSPythonRaspberry PiWebWindows
AndroidCiOSPythonWeb
SummaryPicovoice KoalaMozilla RNNoise
Introduction
AndroidCiOSLinuxmacOSNode.jsPythonRaspberry PiWebWindows
AndroidCNode.jsPythoniOSWeb
SummaryPicovoice EaglepyannoteSpeechBrainWeSpeaker
Introduction
AndroidCiOSLinuxmacOSPythonRaspberry PiWebWindows
AndroidCiOSPythonWeb
SummaryPicovoice FalconAmazon TranscribeAzure Speech-to-TextGoogle Speech-to-Textpyannote
Introduction
AndroidArduinoCChrome.NETEdgeFirefoxFlutteriOSJavaLinuxmacOSMicrocontrollerNode.jsPythonRaspberry PiReactReact NativeRustSafariUnityWebWindows
AndroidC.NETFlutteriOSJavaMicrocontrollerNode.jsPythonReactReact NativeRustUnityWeb
SummaryPorcupineSnowboyPocketSphinx
Wake Word TipsFAQ
Introduction
AndroidCChrome.NETEdgeFirefoxFlutteriOSJavaLinuxmacOSNode.jsPythonRaspberry PiReactReact NativeRustSafariUnityWebWindows
AndroidC.NETFlutteriOSJavaNode.jsPythonReactReact NativeRustUnityWeb
SummaryPicovoice RhinoGoogle DialogflowAmazon LexIBM WatsonMicrosoft LUIS
Expression SyntaxFAQ
Introduction
AndroidC.NETiOSLinuxmacOSNode.jsPythonRaspberry PiRustWebWindows
AndroidC.NETiOSNode.jsPythonRustWeb
SummaryPicovoice CobraWebRTC VAD
FAQ
Introduction
AndroidC.NETFlutteriOSNode.jsPythonReact NativeRustUnityWeb
AndroidC.NETFlutteriOSNode.jsPythonReact NativeRustUnityWeb
Introduction
C.NETNode.jsPython
C.NETNode.jsPython
FAQGlossary

Porcupine Wake Word
React 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 get your AccessKey. Make sure to keep your AccessKey secret.

Quick Start

Setup

  1. Install Node.js.

  2. Install the npm packages:

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

Usage

To initialize Porcupine Wake Word, you'll need a Porcupine keyword file (.ppn) as well as a 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 ${PORCUPINE_PARAMS_PATH} -o ${OUTPUT_FILE_PATH}

Create a porcupineKeyword and a porcupineModel object with either of the methods above:

const PORCUPINE_KEYWORD_BASE64 = /* Base64 representation of the `.ppn` keyword file*/;
const porcupineKeyword = {
publicPath: "${KEYWORD_FILE_PATH}",
// or
base64: PORCUPINE_KEYWORD_BASE64,
label: "${KEYWORD_LABEL}" // An arbitrary string used to identify the keyword once the detection occurs.
}
const PORCUPINE_MODEL_BASE64 = /* Base64 representation of the `.pv` model file*/;
const porcupineModel = {
publicPath: "${MODEL_FILE_PATH}", // or
base64: PORCUPINE_MODEL_BASE64
}

Import and call the usePorcupine Hook, and initialize Porcupine Wake Word with your AccessKey, porcupineKeyword, and porcupineModel:

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 porcupineKeyword = {
publicPath: "${KEYWORD_FILE_PATH}",
label: "${KEYWORD_LABEL}" // An arbitrary string used to identify the keyword once the detection occurs.
}
const porcupineModel = { publicPath: "${MODEL_FILE_PATH}" }
useEffect(() => {
init(
"${ACCESS_KEY}",
porcupineKeyword,
porcupineModel
);
}, []);
useEffect(() => {
if (keywordDetection !== null) {
// ... use keyword detection result
}
}, [keywordDetection]);
// ... render component
}

To detect for multiple keywords, call init with an array of keywords:

init(
"${ACCESS_KEY}",
[porcupineKeyword1, porcupineKeyword2],
porcupineModel
);

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 Wake Word 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 Wake Word. If both are set, Porcupine Wake Word will use the base64 model. An arbitrary label is required to identify the keyword once the detection occurs.

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

Non-English Languages

In order to use Porcupine Wake Word 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 Porcupine GitHub repository.

Demo

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

Setup

Clone the Porcupine Wake Word repository from GitHub:

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

Usage

  1. Install dependencies:
cd porcupine/demo/react
npm install
  1. 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}
  1. Open http://localhost:3000 to view it in the browser.

  2. Enter your access key and press on Init Porcupine to start recording for keyword detections.

Resources

Packages

  • @picovoice/porcupine-react on the npm registry
  • @picovoice/porcupine-web on the npm registry
  • @picovoice/web-voice-processor on the npm registry

API

  • @picovoice/porcupine-react API Docs

GitHub

  • Porcupine Wake Word React SDK on GitHub
  • Porcupine Wake Word React Demo on GitHub

Benchmark

  • Wake Word Benchmark

Further Reading

  • Cross-Browser Voice Commands with React

Was this doc helpful?

Issue with this doc?

Report a GitHub Issue
Porcupine Wake Word React Quick Start
  • Platforms
  • Requirements
  • Picovoice Account & AccessKey
  • Quick Start
  • Setup
  • Usage
  • Custom Keywords
  • Non-English Languages
  • Demo
  • Setup
  • Usage
  • Resources
Voice AI
  • Leopard Speech-to-Text
  • Cheetah Streaming Speech-to-Text
  • Orca Text-to-Speech
  • Koala Noise Suppression
  • Eagle Speaker Recognition
  • Falcon Speaker Diarization
  • Porcupine Wake Word
  • Rhino Speech-to-Intent
  • Cobra Voice Activity Detection
Local LLM
  • picoLLM Inference
  • picoLLM Compression
  • picoLLM GYM
Resources
  • Docs
  • Console
  • Blog
  • Use Cases
  • Playground
Sales & Services
  • Consulting
  • Foundation Plan
  • Enterprise Plan
  • Enterprise Support
Company
  • About us
  • Careers
Follow Picovoice
  • LinkedIn
  • GitHub
  • X
  • YouTube
  • AngelList
Subscribe to our newsletter
Terms of Use
Privacy Policy
© 2019-2025 Picovoice Inc.