Adding voice input to your website: build it yourself, or use a widget?
Updated July 2026 · by the Sleekio team
Speech-to-text has gotten shockingly good and shockingly cheap: Whisper-class models now transcribe an hour of audio for a few cents. So if you want your users to dictate instead of type — in a search box, a support form, a comment field — the model is not the hard part anymore. The hard part is everything around it. This page lays out honestly what a do-it-yourself integration involves, what it costs, and when a drop-in widget is the better call.
The 60-second version
A voice widget adds a mic button to your text fields with one script tag — your users click, speak, and accurate text appears, in 20+ auto-detected languages:
There's a live demo you can try right now — no signup — and the client is open source on GitHub.
What "just call the Whisper API" actually involves
Calling a speech API from a backend script is a one-day job. Shipping voice input in a browser, to real users, on real devices is where the weeks go:
| You build & maintain (DIY) | Widget |
|---|---|
| Backend endpoint, API-key secrets, server hosting | Zero backend — script tag only |
| Mic permissions, MediaRecorder quirks, Safari/Firefox differences | Handled and tested cross-browser |
| iOS Safari codec fragmentation (audio/mp4 vs audio/webm) | Detected and handled automatically |
| React/Vue ignore programmatic .value changes | Native setter + synthetic input events, built in |
| 20+ language handling and auto-detect | Already built |
| Button states, recording animation, error states, mobile UI | Polished default widget with themes |
| Provider fallbacks when the STT API is down | Fallback chain behind one stable API |
| Cost monitoring, rate limiting, abuse protection | Dashboard, domain allowlists and daily caps included |
The cost math
Raw inference is cheap either way — that's the point of Whisper on modern infrastructure. DIY, you'll pay roughly $0.04–$0.36 per hour of audio(Groq to OpenAI pricing), plus a server, plus the initial build, plus the maintenance tax every time Safari or React changes behavior. With Sleekio, a typical dictation costs one credit (up to 30 seconds of speech): free tier of 300 credits/month, then $19/month for ~3,000 or $49/month for ~15,000. For most sites, voice input costs less than your logging service.
When you should build it yourself
Being honest — a widget is the wrong choice if:
- You're at massive scale (hundreds of hours of audio a day), where owning the pipeline pays for its upkeep.
- Compliance requires audio to never leave your infrastructure (on-prem or VPC inference).
- You need custom vocabulary or a fine-tuned model for a specialized domain.
If none of those apply — and for almost every new website they don't — the build-vs-buy math points the same way it does for payments and auth: use the service, ship your actual product.
Frequently asked questions
How much does it cost to add voice input to a website?
With Sleekio it's free to start: 300 transcriptions a month with no credit card. Paid plans are $19/month (~3,000 credits) and $49/month (~15,000 credits), where one credit covers up to 30 seconds of speech. Building it yourself means paying a Whisper API (from ~$0.04/hour of audio on Groq to $0.36/hour at OpenAI) plus a backend server, plus the engineering time to build and maintain recording, codec handling and text insertion.
Does a voice input widget work with React, Vue or Svelte?
Sleekio inserts text using the native prototype setter plus a synthetic input event, so controlled inputs, onChange, v-model and Svelte bindings update correctly. Setting input.value directly — the naive approach — silently breaks React and Vue forms.
Does voice dictation work on iPhone / Safari?
Yes. Safari records audio as MP4/AAC while Chrome and Firefox record WebM/Opus; the widget detects the supported format with MediaRecorder.isTypeSupported and the backend accepts both. This codec split is one of the most common reasons DIY implementations break on iOS.
Where does the audio go? Is it stored?
Audio is processed in memory, transcribed, and immediately discarded. It is never stored and never used for training. The widget client is open source on GitHub so you can read exactly what runs on your page.
Which languages are supported?
20+ languages with automatic detection, powered by Whisper-class models. You can also pin a specific language per page with the data-language attribute.
Is the API key safe to put in my page source?
Yes — it's a publishable key, like a Stripe pk_ key. Protection comes from a per-key domain allowlist, per-minute and per-day rate caps, and one-click key rotation, not from secrecy.
Try it
The fastest way to decide is to talk to it: the live demo on the developers page works in your browser right now, and the free tier needs no credit card.
Try the live demo →