Back to docsRecipe

Recipe: Voice search design

A production pattern for building accessible, latency-tolerant voice search in a desktop loader UI. Covers Web Speech API, debounced transcription, and graceful fallback to text input.

Ingredients

  • Web Speech API (SpeechRecognition)
  • Debounce wrapper (300 ms trailing edge)
  • Visual feedback ring with CSS animation
  • Fallback text input always visible
  • Error boundary for unsupported browsers

Steps

  1. Detect support. Check for window.SpeechRecognition or webkit prefix. Render fallback-only UI if absent.
  2. Instantiate. Create recognition instance with continuous: false and interimResults: true.
  3. Debounce results. Pipe onresult through a 300 ms trailing debounce. Update search query only on final transcript.
  4. Animate listening. Apply a pulsing violet ring around the mic button via Tailwind animate-pulse and a custom ring color.
  5. Handle errors. Catch onerror events (network, no-speech, aborted). Show a toast and revert to text input without breaking the page.

Edge cases

  • User revokes mic permission mid-session
  • Recognition returns empty string after timeout
  • Rapid start/stop toggling floods the API
  • Browser tab loses focus during recognition

Nimbus note: Voice search in the loader UI must never block the main thread. Offload recognition to a web worker when available, and always provide a synchronous text fallback for air-gapped or locked-down environments.