react-speech-recognition-ui
Version:
A beautiful, production-ready voice transcription package for React applications using the Web Speech API
439 lines (344 loc) • 12.6 kB
Markdown
# 🎤 React Speech Recognition
[](https://badge.fury.io/js/react-speech-recognition-ui)
[](https://www.typescriptlang.org/)
[](https://opensource.org/licenses/MIT)
[](https://bundlephobia.com/package/react-speech-recognition-ui)
A beautiful, production-ready voice transcription package for React applications that leverages the Web Speech API to convert speech to text with real-time processing capabilities.
<p align="center">
<img src="https://i.ibb.co/gMP0xLNb/Screenshot-2025-07-11-at-5-18-47-PM.png" width="500" alt="App Screenshot" />
</p>
## ✨ Features
- 🎯 **Real-time Speech Recognition** - Convert speech to text as you speak
- 🌍 **Multi-language Support** - Support for 14+ languages including English, Spanish, French, German, and more
- 🎨 **Beautiful UI Components** - Polished, responsive design with smooth animations and micro-interactions
- 📚 **Transcription History** - Save and manage your transcription sessions with timestamps
- 💾 **Export Functionality** - Download transcriptions as text files
- 🔊 **Audio Playback** - Text-to-speech functionality to hear your transcriptions
- 📊 **Confidence Scoring** - See how confident the AI is in its transcription
- 🌐 **Browser Compatibility** - Works in Chrome, Edge, and other modern browsers
- 📱 **Responsive Design** - Optimized for desktop, tablet, and mobile devices
- 🔧 **TypeScript Support** - Full TypeScript definitions included
- 🪝 **Custom Hooks** - Flexible hooks for building your own UI
- ⚡ **Zero Dependencies** - Only requires React and Lucide React icons
## 📦 Installation
```bash
npm install react-speech-recognition-ui lucide-react
```
```bash
yarn add react-speech-recognition-ui lucide-react
```
```bash
npm add react-speech-recognition-ui lucide-react
```
```
🛠️ Tailwind CSS Setup (Required)
This library uses Tailwind CSS for its UI components. You must configure Tailwind in your project to ensure the styles are applied properly.
```
```bash
npm install -D tailwindcss
OR just use the cdn link in the index.html
<head>
...
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4.1/dist/tailwind.min.css" rel="stylesheet">
</head>
```
## 🚀 Quick Start
```tsx
import React from 'react';
import { VoiceTranscriber } from 'react-speech-recognition-ui';
function App() {
const handleTranscriptChange = (transcript: string) => {
console.log('New transcript:', transcript);
};
const handleResult = (result) => {
console.log('Recognition result:', result);
};
return (
<div className="p-8">
<VoiceTranscriber
onTranscriptChange={handleTranscriptChange}
onResult={handleResult}
language="en-US"
continuous={true}
interimResults={true}
/>
</div>
);
}
export default App;
```
## 📖 Components
### 🎤 VoiceTranscriber
The main transcription component with a complete UI for recording and displaying transcriptions.
```tsx
import { VoiceTranscriber } from 'react-speech-recognition-ui';
<VoiceTranscriber
onTranscriptChange={(transcript) => handleTranscriptChange(transcript)}
onResult={(result) => handleResult(result)}
language="en-US"
continuous={true}
interimResults={true}
maxHeight="400px"
className="custom-class"
/>
```
#### Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `onTranscriptChange` | `(transcript: string) => void` | - | Called when transcript updates |
| `onResult` | `(result: TranscriptionResult) => void` | - | Called when recognition result is available |
| `language` | `string` | `'en-US'` | Language code for recognition |
| `continuous` | `boolean` | `true` | Keep listening after user stops speaking |
| `interimResults` | `boolean` | `true` | Show partial results while speaking |
| `maxHeight` | `string` | `'400px'` | Maximum height of transcript area |
| `className` | `string` | `''` | Additional CSS classes |
### 🪝 useVoiceTranscription Hook
A powerful custom hook for integrating speech recognition into your own components.
```tsx
import { useVoiceTranscription } from 'react-speech-recognition-ui';
function MyComponent() {
const {
transcript,
interimTranscript,
isListening,
isSupported,
error,
confidence,
start,
stop,
reset,
} = useVoiceTranscription({
continuous: true,
interimResults: true,
language: 'en-US',
onResult: (result) => console.log('Result:', result),
onError: (error) => console.error('Error:', error),
});
if (!isSupported) {
return <div>Speech recognition not supported</div>;
}
return (
<div>
<button onClick={start} disabled={isListening}>
Start Recording
</button>
<button onClick={stop} disabled={!isListening}>
Stop Recording
</button>
<button onClick={reset}>Reset</button>
<div>
<p><strong>Final:</strong> {transcript}</p>
{interimTranscript && (
<p><em>Interim:</em> {interimTranscript}</p>
)}
{error && <p style={{ color: 'red' }}>Error: {error}</p>}
{confidence > 0 && (
<p>Confidence: {Math.round(confidence * 100)}%</p>
)}
</div>
</div>
);
}
```
#### Hook Options
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `continuous` | `boolean` | `true` | Keep listening after user stops speaking |
| `interimResults` | `boolean` | `true` | Return partial results while speaking |
| `language` | `string` | `'en-US'` | Language code for recognition |
| `onResult` | `(result: TranscriptionResult) => void` | - | Called when result is available |
| `onError` | `(error: string) => void` | - | Called when error occurs |
| `onStart` | `() => void` | - | Called when recognition starts |
| `onEnd` | `() => void` | - | Called when recognition ends |
| `onTranscriptChange` | `(transcript: string) => void` | - | Called when transcript changes |
#### Hook Return Values
| Property | Type | Description |
|----------|------|-------------|
| `transcript` | `string` | Final transcribed text |
| `interimTranscript` | `string` | Partial transcript while speaking |
| `isListening` | `boolean` | Whether recognition is active |
| `isSupported` | `boolean` | Whether browser supports speech recognition |
| `error` | `string \| null` | Current error message |
| `confidence` | `number` | Confidence score (0-1) |
| `start` | `() => void` | Start recognition |
| `stop` | `() => void` | Stop recognition |
| `reset` | `() => void` | Reset all state |
### 📚 TranscriptionHistory
Manage and display transcription history with export capabilities.
```tsx
import { TranscriptionHistory } from 'react-speech-recognition-ui';
<TranscriptionHistory
history={historyItems}
onDelete={(id) => handleDelete(id)}
onClear={() => handleClear()}
className="my-history"
/>
```
#### Props
| Prop | Type | Description |
|------|------|-------------|
| `history` | `HistoryItem[]` | Array of transcription history items |
| `onDelete` | `(id: string) => void` | Called when item is deleted |
| `onClear` | `() => void` | Called when all history is cleared |
| `className` | `string` | Additional CSS classes |
### 🌍 LanguageSelector
A beautiful language selection component for multi-language support.
```tsx
import { LanguageSelector } from 'react-speech-recognition-ui';
<LanguageSelector
selectedLanguage={language}
onLanguageChange={(lang) => setLanguage(lang)}
className="language-selector"
/>
```
#### Props
| Prop | Type | Description |
|------|------|-------------|
| `selectedLanguage` | `string` | Currently selected language code |
| `onLanguageChange` | `(language: string) => void` | Called when language changes |
| `className` | `string` | Additional CSS classes |
## 🌍 Supported Languages
| Language | Code | Native Name |
|----------|------|-------------|
| English (US) | `en-US` | English (US) |
| English (UK) | `en-GB` | English (UK) |
| Spanish | `es-ES` | Español |
| French | `fr-FR` | Français |
| German | `de-DE` | Deutsch |
| Italian | `it-IT` | Italiano |
| Portuguese (Brazil) | `pt-BR` | Português (Brasil) |
| Russian | `ru-RU` | Русский |
| Japanese | `ja-JP` | 日本語 |
| Korean | `ko-KR` | 한국어 |
| Chinese (Simplified) | `zh-CN` | 中文 (简体) |
| Chinese (Traditional) | `zh-TW` | 中文 (繁體) |
| Arabic | `ar-SA` | العربية |
| Hindi | `hi-IN` | हिन्दी |
## 📋 TypeScript Interfaces
### TranscriptionResult
```typescript
interface TranscriptionResult {
transcript: string; // The transcribed text
confidence: number; // Confidence score (0-1)
isFinal: boolean; // Whether result is final
timestamp: number; // When result was created
}
```
### HistoryItem
```typescript
interface HistoryItem {
id: string; // Unique identifier
transcript: string; // Transcribed text
timestamp: number; // When transcription was created
confidence: number; // Confidence score
duration: number; // Recording duration in seconds
}
```
### Language
```typescript
interface Language {
code: string; // Language code (e.g., 'en-US')
name: string; // English name
nativeName: string; // Native language name
}
```
## 🌐 Browser Support
| Browser | Support | Notes |
|---------|---------|-------|
| ✅ Chrome | Full | Recommended browser |
| ✅ Edge | Full | Chromium-based versions |
| ⚠️ Safari | Limited | Basic functionality |
| ❌ Firefox | None | Web Speech API not supported |
## 🎨 Styling
The components come with beautiful default styles using Tailwind CSS classes. You can customize the appearance by:
1. **Adding custom CSS classes:**
```tsx
<VoiceTranscriber className="my-custom-styles" />
```
2. **Overriding Tailwind classes:**
```css
.my-custom-styles {
@apply bg-purple-100 border-purple-300;
}
```
3. **Using CSS-in-JS or styled-components:**
```tsx
const StyledTranscriber = styled(VoiceTranscriber)`
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
`;
```
## 🔧 Advanced Usage
### Custom Error Handling
```tsx
const handleError = (error: string) => {
switch (error) {
case 'not-allowed':
alert('Please allow microphone access');
break;
case 'no-speech':
console.log('No speech detected');
break;
default:
console.error('Recognition error:', error);
}
};
<VoiceTranscriber onError={handleError} />
```
### Real-time Processing
```tsx
const processTranscript = (transcript: string) => {
// Send to API for analysis
if (transcript.includes('urgent')) {
sendNotification('Urgent message detected');
}
// Auto-save every 10 words
const wordCount = transcript.split(' ').length;
if (wordCount % 10 === 0) {
saveToDatabase(transcript);
}
};
<VoiceTranscriber onTranscriptChange={processTranscript} />
```
### Integration with Forms
```tsx
const ContactForm = () => {
const [message, setMessage] = useState('');
return (
<form>
<textarea
value={message}
onChange={(e) => setMessage(e.target.value)}
placeholder="Type or speak your message..."
/>
<VoiceTranscriber
onTranscriptChange={setMessage}
className="mt-4"
/>
<button type="submit">Send Message</button>
</form>
);
};
```
## 🚀 Performance Tips
1. **Use `continuous: false`** for short commands
2. **Disable `interimResults`** if you don't need real-time updates
3. **Implement debouncing** for `onTranscriptChange` callbacks
4. **Clean up resources** when components unmount
```tsx
// Debounced processing
const debouncedProcess = useMemo(
() => debounce((transcript) => processTranscript(transcript), 500),
[]
);
<VoiceTranscriber onTranscriptChange={debouncedProcess} />
```
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 🙏 Acknowledgments
- Built with the [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API)
- Icons provided by [Lucide React](https://lucide.dev/)
- Styled with [Tailwind CSS](https://tailwindcss.com/)
---
<div align="center">
<strong>Made with ❤️ for the React community</strong>
</div>