DEV Community
Follow
Add a wake-word to your web app in 5 minutes
This guide details how to implement an on-device wake-word detector ("Hey Assistant") in a web browser using WebAssembly SIMD128. This approach eliminates cloud API latency, per-request billing, and privacy concerns as audio remains on the user's device. To start, users need a modern browser, a microphone, and a secure server (HTTPS or localhost). The SDK can be installed via npm or a CDN, weighing approximately 275 KB, less than most icon fonts.The setup involves an HTML shell with a start button and status display, served securely for microphone access. The next step is to initialize the WakeWordEngine and load the pre-trained, 100 KB "Hey Assistant" model, setting a detection threshold. Microphone audio is then captured at 16 kHz mono using AudioContext, ensuring optimal detection quality.The core of the detection involves pushing fixed-size chunks of audio (Int16 PCM samples) to the engine within an audioprocess event listener. Detected wake-words trigger console logs with timestamps and scores, updating the on-screen status. The engine manages its own cooldown to prevent spam detections from a single utterance.Users can customize the input format, opting for Float32 samples, and fine-tune the detection threshold for sensitivity. Lowering the threshold increases sensitivity but might lead to more false positives, while raising it reduces them but might miss quieter utterances. The model boasts high precision and recall, with a default threshold of 0.9.The article provides a complete, copy-pasteable code example for a functional demo. Beyond "Hey Assistant," custom phrases and languages are available on a paid tier, and the SDK extends to native mobile (iOS, Android) and Linux/edge devices (Raspberry Pi). The SDK's wrapper is open-source (Apache-2.0), while the WebAssembly runtime and model weights are proprietary but allow redistribution as part of the SDK.