← all repositories
chengsokdara/use-whisper

A React hook that actually listens to you

Wraps browser audio recording, silence stripping, and OpenAI's Whisper API into one impatient-developer-friendly package.

use-whisper
Velocity · 7d
+0.7
★ / day
Trend
steady
star history

What it does

useWhisper is a React hook that handles the entire pipeline from microphone to transcript: it records audio via RecordRTC, detects when you’re actually speaking with hark, optionally strips silence with FFmpeg-wasm, and ships the result to OpenAI’s Whisper API. You get back booleans for recording, speaking, and transcribing, plus the final transcript.text.

The interesting bit

The hook lazy-loads its heavy dependencies (FFmpeg, lamejs, axios) so you only pay for silence removal or MP3 encoding if you ask for it. The nonStop mode is a nice touch: it keeps recording while you’re talking, then auto-stops after a configurable timeout when you go quiet — useful for hands-free dictation without chopping mid-sentence.

Key highlights

  • Real-time streaming transcription via timeSlice intervals (default 1s chunks)
  • removeSilence flag runs FFmpeg client-side to trim dead air before API upload, saving tokens
  • onTranscribe callback lets you proxy through your own server instead of exposing the OpenAI key in browser code
  • autoStart and nonStop modes for always-on or voice-activated recording
  • Supports Whisper’s full config: language, temperature, prompt context, and output format

Caveats

  • The README notes a React Native port is “being developed” with a separate repo; don’t expect this hook to drop into your mobile app
  • mode: 'translations' is documented but only supports translation to English, which the README admits is a current limitation
  • Dependency stack is substantial: RecordRTC, hark, FFmpeg-wasm, and axios are all in the bundle path for various features

Verdict

Good fit if you need voice input in a React app and don’t want to wire up five separate libraries. Skip it if you’re building for React Native today, or if you need on-device transcription without the OpenAI round-trip.

heatdrop uses Google Analytics to see which pages get read — nothing else. Your call. How we handle data.