Top AI Repos — open-source AI, indexed and scored
Top AI Repos tracks AI repositories on GitHub and answers two different questions about each one: is it moving right now, and would you bet a product on it.
Top AI Repos tracks AI repositories on GitHub and answers two different questions about each one: is it moving right now, and would you bet a product on it.
React hook for OpenAI Whisper with speech recorder, real-time transcription, and silence removal built-in
| Date | Stars |
|---|---|
| 2026-07-24 | 785 |
| 2026-07-25 | 785 |
| 2026-07-28 | 785 |
| 2026-07-30 | 785 |
| 2026-08-06 | 785 |
Today
— stars today
This week
— stars this week
This month
— stars this month
Momentum
0.0
growth rate 0.00%/day
# useWhisper
React Hook for OpenAI Whisper API with speech recorder, real-time transcription and silence removal built-in
---
- ### Demo
- ###### Real-Time transcription demo
https://user-images.githubusercontent.com/2707253/224465747-0b1ee159-21dd-4cd0-af9d-6fc9b882d716.mp4
---
- ### Announcement
useWhisper for React Native is being developed.
Repository: [https://github.com/chengsokdara/use-whisper-native](https://github.com/chengsokdara/use-whisper-native)
Progress: [https://github.com/chengsokdara/use-whisper-native/issues/1](https://github.com/chengsokdara/use-whisper-native/issues/1)
- ### Install
```
npm i @chengsokdara/use-whisper
```
```
yarn add @chengsokdara/use-whisper
```
- ### Usage
```jsx
import { useWhisper } from '@chengsokdara/use-whisper'
const App = () => {
const {
recording,
speaking,
transcribing,
transcript,
pauseRecording,
startRecording,
stopRecording,
} = useWhisper({
apiKey: process.env.OPENAI_API_TOKEN, // YOUR_OPEN_AI_TOKEN
})
return (
<div>
<p>Recording: {recording}</p>
<p>Speaking: {speaking}</p>
<p>Transcribing: {transcribing}</p>
<p>Transcribed Text: {transcript.text}</p>
<button onClick={() => startRecording()}>Start</button>
<button onClick={() => pauseRecording()}>Pause</button>
<button onClick={() => stopRecording()}>Stop</button>
</div>
)
}
```
- ###### Custom Server (keep OpenAI API token secure)
```jsx
import { useWhisper } from '@chengsokdara/use-whisper'
const App = () => {
/**
* you have more control like this
* do whatever you want with the recorded speech
* send it to your own custom server
* and return the response back to useWhisper
*/
const onTranscribe = (blob: Blob) => {
const base64 = await new Promise<string | ArrayBuffer | null>(
(resolve) => {
const reader = new FileReader()
reader.onloadend = () => resolve(reader.result)
reader.readAsDataURL(blob)
}
)
const body = JSON.stringify({ file: base64, model: 'whisper-1' })
const headers = { 'Content-Type': 'application/json' }
const { default: axios } = await import('axios')
const response = await axios.post('/api/whisper', body, {
headers,
})
const { text } = await response.data
// you must return result from your server in Transcript format
return {
blob,
text,
}
}
const { transcript } = useWhisper({
// callback to handle transcription with custom server
onTranscribe,
})
return (
<div>
<p>{transcript.text}</p>
</div>
)
}
```
- ### Examples
- ###### Real-time streaming trascription
```jsx
import { useWhisper } from '@chengsokdara/use-whisper'
const App = () => {
const { transcript } = useWhisper({
apiKey: process.env.OPENAI_API_TOKEN, // YOUR_OPEN_AI_TOKEN
streaming: true,
timeSlice: 1_000, // 1 second
whisperConfig: {
language: 'en',
},
})
return (
<div>
<p>{transcript.text}</p>
</div>
)
}
```
- ###### Remove silence before sending to Whisper to save cost
```jsx
import { useWhisper } from '@chengsokdara/use-whisper'
const App = () => {
const { transcript } = useWhisper({
apiKey: process.env.OPENAI_API_TOKEN, // YOUR_OPEN_AI_TOKEN
// use ffmpeg-wasp to remove silence from recorded speech
removeSilence: true,
})
return (
<div>
<p>{transcript.text}</p>
</div>
)
}
```
- ###### Auto start recording on component mounted
```jsx
import { useWhisper } from '@chengsokdara/use-whisper'
const App = () => {
const { transcript } = useWhisper({
apiKey: process.env.OPENAI_API_TOKEN, // YOUR_OPEN_AI_TOKEN
// will auto start recording speech upon component mounted
autoStart: true,
})
return (
<div>
<p>{transcript.text}</p>
</div>
)
}
```
- ###### Keep recording as long as the user is speaking
```jsx
import { useWhisper } from '@chengsokdara/use-whisper'
coExcerpt of 12,350 characters
Read on GitHub
41
Would you bet a product on this? Bounded 0–100 and slow moving.
matched fp:3480042d00cee63d, topic:whisper, desc:transcription, readme:transcription