Gathering detailed insights and metrics for speech2textjs
Gathering detailed insights and metrics for speech2textjs
npm install speech2textjs
Typescript
Module System
Node Version
NPM Version
65.8
Supply Chain
89.1
Quality
77.7
Maintenance
100
Vulnerability
100
License
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Total Downloads
283
Last Day
1
Last Week
2
Last Month
6
Last Year
283
Minified
Minified + Gzipped
Latest Version
1.0.2
Package Id
speech2textjs@1.0.2
Unpacked Size
5.34 kB
Size
2.08 kB
File Count
3
NPM Version
10.9.0
Node Version
20.16.0
Published on
Dec 19, 2024
Cumulative downloads
Total Downloads
Last Day
0%
1
Compared to previous day
Last Week
100%
2
Compared to previous week
Last Month
-87.8%
6
Compared to previous month
Last Year
0%
283
Compared to previous year
1
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.
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:
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:
1const { isListening, transcript, startListening, stopListening } = useSpeechToText({ 2 continuous: true, 3 interimResults: true, 4 lang: 'en-GB', 5});
No vulnerabilities found.
No security vulnerabilities found.