Keyword Spotting in the Browser with ONNX Runtime Web

August 2026 · JavaScript · WebAssembly · ONNX

A web page can react to a small set of spoken commands without streaming audio to a speech API. The microphone, feature extraction, model inference, and detection logic can all run inside the browser.

Goal: detect “start”, “stop”, “next”, or your own phrases and use the result to update the page. No AccessKey and no inference backend are required.

Try it now: Open the Voicute console, sign in, choose a model under Demo Models, and click Online Test. You can also download the demo model and open the linked integration code. Models you create can be tested online before download.

Good uses for browser KWS

Hands-free presentations and kiosks
Accessible navigation for a fixed set of actions
Browser games and installations
Local device dashboards
Product demonstrations where audio must stay on-device

Download the Web SDK

git clone https://github.com/voicute/onnx-wakeword.git
cd onnx-wakeword/web
python -m http.server 8000

Open http://localhost:8000. Microphone APIs require a secure context; localhost is allowed for development, while production must use HTTPS.

Load ONNX Runtime and the engine

<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.20.1/dist/ort.min.js"></script>
<script src="wakeword.js"></script>

Load the model

const engine = VoicuteWakeWord.create();
await engine.load(
  "models/model_info.json",
  "models/melspectrogram.onnx"
);

The engine also accepts a packaged model ZIP when JSZip is available.

Listen and control the page

await engine.start((word, probability) => {
  document.querySelector("#status").textContent =
    `${word} (${Math.round(probability * 100)}%)`;

  if (word === "next") showNextSlide();
  if (word === "back") showPreviousSlide();
  if (word === "stop") stopDemo();
});

The first call prompts the user for microphone permission. Provide a visible stop button and call engine.stop() when listening is no longer needed.

Privacy and security

The inference path is local, but your page still has normal web security responsibilities. Explain microphone use, do not start capture unexpectedly, and never map a voice match directly to destructive or privileged operations.

Troubleshooting

Permission is denied

Use HTTPS or localhost, check the browser site permission, and make microphone activation the result of a user click.

The page works on desktop but not mobile

Test the target browser explicitly. Mobile browsers suspend tabs and audio differently; do not claim background listening without device-specific verification.

A phrase triggers twice

Enable cooldown after detection, or disable the UI action until the current operation completes.

Disclosure: Voicute develops the model-generation service and the open Web SDK. Inference runs in the browser after the model is loaded.

Test and download a demo model