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

By [DaVoice.io](https://davoice.io) email: ofer@davoice.io

**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

```bash
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

```js
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:

```js
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:

```js
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`.

```js
const isLicensed = await keywordDetector.setLicense(licenseKey);
```

### `await keywordDetector.init()`

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

```js
await keywordDetector.init();
```

### `await keywordDetector.startListening()`

Starts microphone capture and wake-word detection.

```js
await keywordDetector.startListening();
```

### `await keywordDetector.stopListening()`

Stops microphone capture and wake-word detection.

```js
await keywordDetector.stopListening();
```

### `await keywordDetector.getHealth()`

Returns runtime health information for monitoring.

```js
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:

```js
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:

```js
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:

```js
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 `'./'`.

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

## Example

```bash
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.

```bash
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:

```bash
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 <br>
See that it is working for you.<br>
Integrate it to your life website/app.<br>

## 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 info@davoice.io 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: ofer@davoice.io

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