Zero-Cost Voice I/O for Vue Apps Using the Browser's Web Speech API
Adding voice input or output to a web app usually triggers a procurement conversation. The Web Speech API sidesteps that entirely for the majority of internal tools and simple AI interfaces, provided you handle the HTTPS requirement and browser quirks up front.
The Web Speech API splits into two modules: SpeechSynthesis for local text-to-speech and SpeechRecognition for cloud-backed speech-to-text. A single Vue component wires both together with start/stop controls, real-time interim results, and state management for loading, listening, and errors. The TTS side runs entirely offline with configurable rate, pitch, and volume; the STT side requires HTTPS in production and leans on the browser's own recognition service. Common failure modes — overlapping utterances, denied mic permissions, background leaks after component teardown — each get a specific fix. The approach covers most admin panels, AI chat UIs, and assistive-input features without touching a paid service.
Most teams reach for a cloud TTS/STT SDK by default, but the browser's built-in pipeline already covers the accuracy and latency needs of internal tools, demos, and simple AI chat UIs.
The real deployment friction isn't the API itself — it's the HTTPS requirement for `SpeechRecognition`, which catches out teams testing on staging servers without TLS.
Continuous recognition that auto-restarts in `onend` is a small detail that makes the difference between a demo and something usable in a real conversation flow.
The article's pitfall list doubles as a checklist for production readiness: overlapping speech, orphaned background processes, and silent permission failures are exactly what turns a prototype brittle.