react-speech-to-text-gk


> 🎤 Advanced React speech-to-text library with real-time audio analysis, pitch detection, and comprehensive speech metrics.

Perfect for building voice-controlled applications, transcription tools, audio analysis dashboards, and speech-based interfaces.

📋 Table of Contents

- Features
- Installation
- Quick Start
- Live Demo
- API Reference
- Examples
- Performance
- Browser Support
- TypeScript
- Troubleshooting
- Contributing

✨ Features

$3

- Real-time speech-to-text with Web Speech API
- Multi-language support (50+ languages)
- Interim and final transcript results
- Configurable silence detection
- Optimized performance modes

$3

- Volume monitoring - Real-time decibel measurements
- Pitch detection - Fundamental frequency analysis (60-800 Hz)
- Spectral centroid - Audio brightness analysis
- Performance modes - Speed/Balanced/Quality presets
- Session analytics - Word-level timing and metrics

$3

- TypeScript first - Full type safety and IntelliSense
- Zero configuration - Works out of the box
- Lightweight - Only 1 dependency (pitchy)
- React hooks - Modern, idiomatic React patterns
- Modular design - Use only what you need

📦 Installation

``bash


npm

npm install react-speech-to-text-gk

yarn

yarn add react-speech-to-text-gk

pnpm

pnpm add react-speech-to-text-gk
`

🎮 Live Demo

Try the interactive demo to see all features in action:
- Live Demo - See the library in action
- CodeSandbox - Play with the code
- GitHub Examples - Full example implementation

⚡ Quick Start

$3

`tsx
import { useSpeechToText } from 'react-speech-to-text-gk';

function App() {
const { isListening, transcript, toggleListening } = useSpeechToText();

return (



);
}
`

$3

`tsx
import { useSpeechToText, PerformanceMode } from 'react-speech-to-text-gk';

function VoiceAnalyzer() {
const {
isListening,
transcript,
interimTranscript,
audioMetrics,
toggleListening,
clearTranscript
} = useSpeechToText({
language: 'en-US',
performanceMode: PerformanceMode.BALANCED
});

return (



);
}
`

📚 API Reference

$3

The main hook that provides speech recognition with real-time audio analysis.

#### Parameters

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| language | string | 'es-ES' | Language code (supported languages) |
| silenceTimeout | number | 700 | Silence detection timeout in milliseconds |
| optimizedMode | boolean | true | Enable optimized recognition (fewer alternatives, faster) |
| performanceMode | PerformanceMode | BALANCED | Performance profile (SPEED/BALANCED/QUALITY) |
| audioConfig | object | {} | Audio constraints for getUserMedia API |

#### Performance Modes

`typescript
enum PerformanceMode {
SPEED = 'speed', // 🏃‍♂️ Low latency, minimal CPU usage
BALANCED = 'balanced', // ⚖️ Optimal balance (default)
QUALITY = 'quality' // 🎯 Maximum accuracy, higher CPU usage
}
`

#### Return Values

| Property | Type | Description |
|----------|------|-------------|
| isListening | boolean | Current listening state |
| transcript | string | Final transcript text |
| interimTranscript | string | Interim (temporary) transcript |
| isSupported | boolean | Browser support check |
| silenceDetected | boolean | Silence detection state |
| sessionMetadata | SessionMetadata \| null | Complete session analysis |
| audioMetrics | AudioMetrics | Real-time audio data |
| chartData | ChartData | Chart-ready data |
| toggleListening | () => Promise | Start/stop listening |
| clearTranscript | () => void | Clear all data |
| copyMetadataToClipboard | () => Promise<{success: boolean; message: string}> | Export function |

$3

Standalone hook for audio analysis without speech recognition.

#### Return Values

| Property | Type | Description |
|----------|------|-------------|
| initializeAudioAnalysis | (config?) => Promise | Initialize audio context |
| stopAudioAnalysis | () => void | Stop audio analysis |
| getAudioData | () => AudioMetrics | Get current audio metrics |
| clearAudioData | () => void | Clear stored data |

💡 Examples

$3

`tsx
function VoiceControls() {
const { transcript, isListening, toggleListening } = useSpeechToText({
language: 'en-US'
});

// Simple voice commands
useEffect(() => {
const command = transcript.toLowerCase();
if (command.includes('navigate home')) {
// Handle navigation
} else if (command.includes('search for')) {
// Handle search
}
}, [transcript]);

return (

{isListening ? 'Listening...' : 'Voice Control'}

);
}
`

$3

`tsx
function TranscriptionApp() {
const {
transcript,
interimTranscript,
isListening,
sessionMetadata,
toggleListening,
copyMetadataToClipboard
} = useSpeechToText({
language: 'en-US',
silenceTimeout: 2000,
performanceMode: PerformanceMode.QUALITY
});

return (



);
}
`

$3

`tsx
function AudioDashboard() {
const {
audioMetrics,
sessionMetadata,
isListening,
toggleListening
} = useSpeechToText({
performanceMode: PerformanceMode.QUALITY,
silenceTimeout: 1500
});

return (