Speech2textJS

Speech2text is a simple React hook for converting speech into text in real time. It uses the Web Speech API (webkitSpeechRecognition) to provide speech recognition functionality, allowing you to integrate voice-to-text in your React applications with minimal effort.

Installation

1npm install speech2textjs

Basic Setup You can use the useSpeechToText hook to start listening and convert speech into text. Here's an example of how to use it in your React component:

Usage

1import React, { useState } from 'react';
2import { Button } from 'your-ui-library'; // Customize as per your UI library
3import { Mic } from 'lucide-react'; // Optional, use for icon
4import useSpeechToText from 'speech2text';  // Import the hook
5
6function RecordAnswerSection() {
7  const [userAnswer, setUserAnswer] = useState("");  
8  const { isListening, transcript, startListening, stopListening } = useSpeechToText({ continuous: true });
9
10  const startStopListening = () => {
11    if (isListening) {
12      stopVoiceInput();
13    } else {
14      startListening();
15    }
16  };
17
18  const stopVoiceInput = () => {
19    setUserAnswer(prev => prev + " " + transcript);
20    stopListening();
21  };
22   useEffect(() => {
23       if (isListening) {
24            const newText = transcript.replace(previousTranscript.current, "").trim();
25            if (newText) {
26                setUserAnswer(prev => prev + (newText ? " " + newText : ""));
27                previousTranscript.current = transcript; 
28            }
29        }
30      }, [transcript, isListening]); 
31  return (
32    <div>
33      <Button className="my-10" onClick={startStopListening}>
34        {isListening ? <h2><Mic /> Recording...</h2> : "Record Answer"}
35      </Button>
36      <Button onClick={() => { console.log(userAnswer); }}>
37        Show Recorded Answer
38      </Button>
39      <h2>{userAnswer}</h2>
40      <textarea
41        disabled={isListening}  
42        value={userAnswer}
43        onChange={(e) => { setUserAnswer(e.target.value); }}  
44      />
45    </div>
46  );
47}
48
49export default RecordAnswerSection;

Example with Custom Options You can customize the options when using the hook, like so:

Customization

1const { isListening, transcript, startListening, stopListening } = useSpeechToText({
2  continuous: true,
3  interimResults: true,
4  lang: 'en-GB',
5});