Voice Control for Websites: Speech API, Dictation, TTS

Firefox and Safari block native SpeechRecognition — up to 30% of users lose voice control functionality. Average response time is 1.2 seconds. We solve this with a hybrid: browser API as primary for Chrome and Edge, Whisper from OpenAI as fallback for other browsers. This approach reduces response time to 1–4 seconds and covers 100% of browsers. Over 30 projects, we've gathered use cases: dictation in CRM, presentation control, voice search in e-commerce. Statistics show that more than 60% of mobile users prefer voice input over typing. Whisper achieves 95% accuracy even on noisy recordings.

What is the Web Speech API?

The Web Speech API is a W3C standard that includes speech recognition (ASR) and speech synthesis (TTS). It allows adding voice interaction without external libraries. However, due to limitations in Firefox and Safari, a server-side fallback is required. Browser SpeechRecognition is only available in Chrome/Edge, while SpeechSynthesis works everywhere, but with caveats (long text cutoff).

Why combine browser ASR and Whisper for voice control?

Browser ASR provides instant response and zero cost per request. Whisper guarantees operation in any browser and high quality on noisy audio. The combination saves up to 30% development time: no need to write a complex server-side pipeline — a simple proxy suffices. Cost per request to Whisper is about $0.006 per minute of audio, while browser ASR is free. Users get a seamless experience.

Native ASR responds 2x faster than Whisper, but Whisper is 1.5x more accurate on noisy recordings — the combination provides optimal balance.

How speech recognition works

To start, we request microphone permission via getUserMedia. The native API returns interim and final results. We process them in real time: show interim text in gray, final in black. This is user-friendly — they see that recognition is ongoing. Key configuration is the continuous mode: for dictating long texts we enable continuous recording; for voice commands, single-phrase recording saves bandwidth.

Case study: voice search with Whisper fallback — voice control for a website

For an e-commerce client, we implemented voice search: the user clicks a button, says a product name, and the result appears instantly. For Chrome we used native SpeechRecognition; for Firefox/Safari we recorded audio via MediaRecorder and sent it to /api/transcribe, which proxies the request to Whisper API. Response time: 1-2 seconds for native, 2-4 for Whisper. After deployment, search conversion increased by 15%, and support load dropped by 20% (users less frequently typed text manually). Error handling: we display clear messages — "Microphone access denied", "No speech detected", "Network error". The user always knows what went wrong.

Speech synthesis (Text-to-Speech)

TTS (SpeechSynthesis) is supported everywhere, but there are nuances: in Chrome, long texts (~500 characters) cut off after 15 seconds. We solved this by pausing/resuming at sentence boundaries — the synthesizer doesn't stall. We also select voices: for Russian, 3-4 voices are available per OS; a specific one can be chosen. More details in MDN Web Speech API.

const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)(); recognition.lang = 'ru-RU'; recognition.continuous = true; recognition.interimResults = true; recognition.onresult = (event) => { for (let i = event.resultIndex; i < event.results.length; i++) { const transcript = event.results[i][0].transcript; if (event.results[i].isFinal) { console.log('Final:', transcript); } else { console.log('Interim:', transcript); } } }; recognition.start(); 

Voice feature implementation process

1. Analytics — determine which scenarios are needed (voice search, dictation, commands), assess users' browser environment (e.g., 60% Chrome, 20% Safari, 20% Firefox).
2. Design — choose architecture: native ASR + Whisper fallback, TTS configuration. Draw UX flow (button, waiting state, result).
3. Implementation — write React hooks useSpeechRecognition, useVoiceCommands, class TextToSpeech. Cover code with unit tests (Jest).
4. Testing — verify on Chrome, Firefox, Safari, iOS, Android. Fix bugs (e.g., differences in webkitSpeechRecognition).
5. Deployment — upload to staging, perform load testing of TTS (concurrent users), after approval — go live.

Timelines and what's included

Estimated timelines: voice search or dictation — from 2 days; voice commands + TTS — from 3 days; Whisper fallback integration — +1 day. Cost is calculated individually. Serverless function cost for Whisper — from $0.20 per month at low load.

What's included in the deliverable:

• Working React/TypeScript code with hooks and components.
• Documentation in README (API description, examples, deployment instructions).
• Configuration of serverless function for Whisper (if fallback is needed).
• Team training (1-hour video demo).
• Code warranty — 30 days after delivery (bug fixes).

Checklist of typical mistakes

We highlight 5 typical mistakes when implementing voice features:

• Not checking browser support — user sees an empty interface.
• Not handling the not-allowed error — no fallback when microphone is denied.
• For long dictation, continuous: true is not set — recording stops.
• TTS in Chrome cuts off on long texts — no workaround (pause/resume).
• Autoplay policy blocks TTS on page load — a user gesture is required.

Assess the potential of voice control for your project — contact us for a consultation. Order an audit of your site for voice interface compatibility. Additional information about the Web Speech API can be found in the official MDN documentation.