react-transcribe

React Transcribe

A React component for speech-to-text transcription with silence detection using the browser's Web Speech API.

Installation

npm install react-transcribe
# or
yarn add react-transcribe

Features

• Real-time speech transcription
• Silence detection with automatic pausing
• Countdown timer for maximum silence duration
• Customizable UI through render props pattern
• Callback-based communication

Usage

import { SpeechToText } from 'react-transcribe';
import { useState } from 'react';

const MyComponent = () => {
  const [transcript, setTranscript] = useState('');

  // Handle speech updates
  const handleSpeech = (info) => {
    setTranscript(info.transcript);
    console.log('Interim:', info.interimTranscript);
  };

  // Handle listening state changes
  const handleSpeechToggle = (info) => {
    console.log('Listening:', info.isListening);
  };

  return (
    <SpeechToText 
      onSpeech={handleSpeech}
      onSpeechToggle={handleSpeechToggle}
      silenceDuration={1000}
      maxSilenceDuration={60000}
      countdownThreshold={10000}
      language="en-US"
    >
      {({ 
        listening, 
        isActivelySpeaking, 
        silenceCountdown, 
        transcript, 
        interimTranscript,
        toggleListening 
      }) => (
        <div>
          <button onClick={toggleListening}>
            {listening ? 'Stop Listening' : 'Start Listening'}
          </button>
          
          <div>
            {listening
              ? isActivelySpeaking
                ? 'Active Speech Detected'
                : silenceCountdown
                  ? `No Speech Detected (${silenceCountdown}s)`
                  : 'Waiting for Speech'
              : 'Paused'
            }
          </div>
          
          <div>
            <h3>Transcript:</h3>
            <p>{transcript}</p>
          </div>
        </div>
      )}
    </SpeechToText>
  );
};

Props

Prop	Type	Description	Default
onSpeech	Function	Callback triggered when speech is detected	-
onSpeechToggle	Function	Callback triggered when recognition is toggled	-
children	ReactNode or Function	Either React elements or a render function that receives component state	-
silenceDuration	number	Duration of silence (ms) before pausing active speaking state	1000
maxSilenceDuration	number	Maximum allowed silence duration (ms) before stopping	60000
countdownThreshold	number	When to start showing countdown (ms)	10000
language	string	Speech recognition language	'en-US'

Callback Information

onSpeech callback

Receives an object with:

{
  transcript: string;       // The complete transcription 
  interimTranscript: string; // In-progress transcription
  resetTranscript: () => string | null; // Function to reset transcript and return previous value
}

onSpeechToggle callback

Receives an object with:

{
  isListening: boolean;     // Whether speech recognition is active
  type: 'device';           // The type of toggling (always 'device' for now)
}

State Object (available in render props)

Property	Type	Description
listening	boolean	Whether speech recognition is active
isActivelySpeaking	boolean	Whether user is actively speaking (resets after silence)
silenceCountdown	number	Countdown before auto-stopping (null when not counting down)
transcript	string	Current transcript text
interimTranscript	string	Interim (in-progress) transcript text
browserSupportsSpeechRecognition	boolean	Whether browser supports speech recognition
resetTranscript	function	Reset the transcript
startListening	function	Start speech recognition
stopListening	function	Stop speech recognition
toggleListening	function	Toggle speech recognition on/off

Browser Support

This component uses the Web Speech API, which is supported in most modern browsers. Check browser compatibility for details.

License

MIT