finds.dev← search

// the find

chengsokdara/use-whisper

★ 785 · TypeScript · MIT · updated Apr 2024

React hook for OpenAI Whisper with speech recorder, real-time transcription, and silence removal built-in

A React hook that wraps OpenAI's Whisper API with MediaRecorder, silence detection via hark, and optional ffmpeg-wasm silence stripping. Aimed at developers who want speech-to-text in a React app without wiring up the audio pipeline themselves.

The `onTranscribe` escape hatch lets you route audio through your own server, which is the right call — exposing API keys in the browser is a real problem and the hook makes the secure path nearly as easy as the insecure one. Silence removal via ffmpeg-wasm is a genuine cost saver if your users pause mid-sentence. The `nonStop` + `stopTimeout` pattern handles the common 'keep recording while speaking' UX without you building it. Dependencies are lazy-loaded, so the ffmpeg chunk doesn't hit users who don't use that feature.

Last commit is April 2024 and the issues queue has open bugs with no response — the Whisper API has moved on and this hook hasn't. The 'real-time streaming' mode is fake streaming: it fires a full Whisper API request every `timeSlice` milliseconds, so you get latency spikes and redundant API spend, not actual partial transcripts. Using axios because 'fetch does not work with Whisper endpoint' is a workaround for a problem that was fixed years ago — that's a sign the internals haven't been revisited. No error state exposed in the return object, so if the API call fails you get silence and no way to tell the user.

View on GitHub → Homepage ↗

// want more like this?

We dig through GitHub every week and send a few repos picked for what you actually care about — each with an honest take like this one.

Get finds in your inbox → Search again →