Web Wake Word Detection for JavaScript, React, Next.js, Vue and Angular

By DaVoice.io email: [email protected]

DaVoice Web Wake Word Detection is a wake word, keyword spotting, and voice activation library for modern web apps. It helps developers add always-listening wake words such as "Hey App", custom hotwords, and browser-based voice triggers to JavaScript, React, Next.js, Vue, Angular, Svelte, and other frontend frameworks.

If you are looking for a web wake word detection library, JavaScript wake word package, React wake word detector, or Next.js keyword spotting solution, this package is built for that use case.

What this package does

This package provides:

• Browser-based wake word detection
• Keyword spotting for web apps
• Voice activation for JavaScript applications
• Support for custom wake word models
• A worker-based architecture for low-overhead hotword detection
• Health monitoring through getHealth()

A wake word is the phrase that activates an app or assistant, like "Hey Siri" or "OK Google". You may also see the same problem described as keyword detection, keyword spotting, hotword detection, phrase spotting, voice trigger, or voice activation.

The package can also be part of a larger speech-to-intent flow, where a wake word activates the app and then a second speech step handles commands such as "play music", "start workout", or "order coffee".

New

Major version changes to 2.x.x due to massive reduction in library size and new API

Why use this web wake word library?

• Built for web apps: Use it in JavaScript, React, Next.js, Vue, Angular, Svelte, Nuxt, Gatsby, Ember, Backbone, Mithril, and other browser-based apps.
• Wake word detection in the browser: Run keyword spotting directly in the web app flow.
• Custom wake words: Add your own wake word models for your product or brand.
• Low-latency architecture: Uses worker-based processing for responsive voice activation.
• Health monitoring API: Monitor activation status, audio flow, and wake-word prediction flow.
• Production-friendly integration: Works with static assets and common frontend deployment setups.

Accuracy

MODEL         DETECTION RATE
===========================
DaVoice        0.992481
Top Player     0.874812
Third          0.626567

Supported frameworks and app types

This library is a good fit for:

• JavaScript wake word detection
• React wake word detection
• Next.js wake word detection
• Vue wake word detection
• Angular wake word detection
• Svelte wake word detection
• Browser-based keyword spotting
• Web voice assistants
• Voice-enabled dashboards, kiosks, and assistants
• Custom branded hotword activation on the web

Installation

npm install web-wake-word-cpu-gpu-opt

Required assets

Your app must serve these files from a public or static path:

• models/
• ort-wasm-simd-threaded.jsep.wasm
• audio-worklet-processor.js
• keywordDetector.worker.js

In most web apps these files are copied into public/, dist/, static/, or another frontend assets folder.

Quick Start

import { KeywordDetector } from 'web-wake-word-cpu-gpu-opt';

const keywordDetector = new KeywordDetector(
  './models',
  [
    {
      modelToUse: 'hey_lookdeep.onnx',
      threshold: 0.99,
      bufferCount: 3,
      onKeywordDetected: ({ model, prediction, cntBuf }) => {
        console.log('Keyword detected', { model, prediction, cntBuf });
      },
    },
  ],
  './dist/',
  './dist/'
);

const isLicensed = await keywordDetector.setLicense('<YOUR_LICENSE>');
if (!isLicensed) {
  throw new Error('Invalid or expired license key');
}

await keywordDetector.init();
await keywordDetector.startListening();

React and Next.js wake word integration

This package is designed to work well in React and Next.js apps as long as the required assets are served from a static path.

• In React apps, place the assets in public/ or your bundler output directory.
• In Next.js apps, place the assets in public/ or build with static path environment variables.
• In plain JavaScript apps, serve the assets from dist/ or any HTTPS-accessible folder.

Typical use cases include:

• React voice assistant
• Next.js voice activation
• Browser wake word UI
• JavaScript hotword detection
• Web speech trigger before STT

API Reference

Constructor

Two constructor forms are supported.

Single-model constructor:

const keywordDetector = new KeywordDetector(
  modelsFolderPath,
  'model.onnx',
  threshold,
  bufferCount,
  onKeywordDetected,
  wasmBasePath,
  audioWorkletPath
);

Parameters:

• modelsFolderPath: path or URL to the folder containing the models.
• model.onnx: the wake-word model filename.
• threshold: detection threshold.
• bufferCount: number of consecutive positive buffers required before detection.
• onKeywordDetected: callback receiving { prediction, model, cntBuf }.
• wasmBasePath optional: path or URL to the folder containing ort-wasm-simd-threaded.jsep.wasm.
• audioWorkletPath optional: path or URL to the folder containing audio-worklet-processor.js and keywordDetector.worker.js.

Multi-model constructor:

const keywordDetector = new KeywordDetector(
  modelsFolderPath,
  [
    {
      modelToUse: 'hey_lookdeep.onnx',
      threshold: 0.99,
      bufferCount: 3,
      onKeywordDetected,
    },
    {
      modelToUse: 'need_help_now.onnx',
      threshold: 0.98,
      bufferCount: 2,
      onKeywordDetected,
    },
  ],
  wasmBasePath,
  audioWorkletPath
);

Each model entry supports:

• modelToUse
• threshold
• bufferCount
• onKeywordDetected

await keywordDetector.setLicense(licenseKey)

Validates the license key and returns true or false.

const isLicensed = await keywordDetector.setLicense(licenseKey);

await keywordDetector.init()

Loads the ONNX models and prepares the detector. Call this once before startListening().

await keywordDetector.init();

await keywordDetector.startListening()

Starts microphone capture and wake-word detection.

await keywordDetector.startListening();

await keywordDetector.stopListening()

Stops microphone capture and wake-word detection.

await keywordDetector.stopListening();

await keywordDetector.getHealth()

Returns runtime health information for monitoring.

const health = await keywordDetector.getHealth();

console.log(health.activated);
console.log(health.audio.lastReceivedAt);
console.log(health.wakeWord.predictionsCalculated);
console.log(health.wakeWord.lastPrediction);

The health payload includes:

• activated / listening: whether the detector is currently active.
• initialized: whether init() completed successfully.
• licensed: whether setLicense() succeeded.
• audio: whether audio is currently flowing, the last audio timestamp, and frame/sample counters.
• wakeWord: whether predictions are currently being produced, the last prediction timestamp, total predictions calculated, the latest score snapshot, and detection counters.
• lastError: the latest runtime error observed by the worker, if any.

Typical monitoring example:

const health = await keywordDetector.getHealth();

if (!health.activated) {
  console.log('Detector is not listening');
}

if (!health.audio.isReceiving) {
  console.log('No recent audio frames');
}

if (!health.wakeWord.isProcessing) {
  console.log('Wake-word predictions are not currently flowing');
}

Lifecycle

Recommended app flow:

const keywordDetector = new KeywordDetector(
  modelsFolderPath,
  modelParamsArr,
  wasmBasePath,
  audioWorkletPath
);

const isLicensed = await keywordDetector.setLicense(licenseKey);
if (!isLicensed) {
  throw new Error('Invalid license');
}

await keywordDetector.init();
await keywordDetector.startListening();

const health = await keywordDetector.getHealth();
console.log(health);

await keywordDetector.stopListening();

Using specific path to wasm file

If you need custom paths, pass them into the constructor.

Example using a Chrome extension path:

const keywordDetector = new KeywordDetector(
  modelsPath,
  'model.onnx',
  threshold,
  bufferCount,
  onKeywordDetected,
  'chrome-extension://<EXT_ID>/assets/wasm/',
  'chrome-extension://<EXT_ID>/assets/wasm/'
);

Next.js

Next.js requires static paths. You can run environment flags for the paths below. Otherwise on Next.js the default path is './'.

MODEL_FOLDER_PATH="/static/your-lib/" WASM_BASE_PATH="/static/your-lib/" AUDIO_WORKLET_PATH="/static/your-lib/" npm run build

Example

cd example
npm install
npm run build

Test it in a browser

You can use an HTTPS server to test the wake word flow in the browser.

npm install -g http-server
http-server . -p 8080 --ssl --cert cert.pem --key key.pem

Or run npm run start.

If you do not have cert.pem and/or key.pem

You can create them as follows:

openssl genrsa -out key.pem 2048
openssl req -new -key key.pem -out csr.pem
openssl x509 -req -days 365 -in csr.pem -signkey key.pem -out cert.pem

Next steps

Open a browser with the following URL https://192.168.1.218:8080 See that it is working for you. Integrate it to your life website/app.

Custom wake words

Create your custom wake word

In order to generate your custom wake word you will need to:

• Create wake word mode: Contact us at [email protected] with a list of your desired "custom wake words".

  We will send you corresponding models typically your wake word phrase .onnx for example:

  A wake word *"hey sky" will correspond to hey_sky.onnx.

• Add wake words to javascript project: Simply copy the new onnx files to models directory make sure this directory it copied to the targer such as "dist/model".

• In JS code add the new onnx files to your configuration In example.js change

    const modelToUse = "need_help_now.onnx";

To

    const modelToUse = "hey_sky.onnx"; // or your_model.onnx

Contact us

If you need any help contact us: [email protected]

GitHub examples

Example repositories

https://github.com/frymanofer/Web_WakeWordDetection

https://github.com/frymanofer/Web_WakeWordDetection/tree/main/example

FAQ

What is a wake word?

A wake word is the word or phrase that activates an app, assistant, or voice workflow, like "Hey Siri" or "OK Google". It is also commonly called a hotword, keyword, trigger phrase, wake phrase, or voice activation phrase.

Is this package good for JavaScript wake word detection?

Yes. This library is built for browser-based JavaScript apps and can be used in plain JS, React, Next.js, Vue, Angular, and similar frontend frameworks.

Can I use this for React wake word detection?

Yes. React apps can use this package by serving the required models, wasm file, worker file, and audio worklet file from a static path.

Can I use this for Next.js wake word detection?

Yes. Next.js is supported. You should use static paths for models, wasm assets, and worklet assets.

What is a Speech to Intent?

Speech to Intent refers to the ability to recognize a spoken word or phrase and directly associate it with a specific action or operation within an application.

Unlike a "wake word," which typically serves to activate or wake up the application, Speech to Intent goes further by enabling complex interactions and functionalities based on the recognized intent behind the speech.

For example, a wake word like "Hey App" might activate the application, while Speech to Intent could process a phrase like "Play my favorite song" or "Order a coffee" to execute corresponding tasks within the app. Speech to Intent is often triggered after a wake word activates the app, making it a key component of more advanced voice-controlled applications. This layered approach allows for seamless and intuitive voice-driven user experiences.

How accurate is the platform?

Our platform ensures 99%+ accuracy in various environments.

MODEL         DETECTION RATE
===========================
DaVoice        0.992481
Top Player     0.874812
Third          0.626567

Keywords

Web wake word detection, JavaScript wake word detection, React wake word detection, Next.js wake word detection, browser keyword spotting, hotword detection for web apps, voice activation for JavaScript, custom wake word, wake word generator, phrase spotting, speech to intent, web voice assistant, frontend wake word SDK.