react-speech-recognizer-component
v1.0.7
Published
React component for Speech Recognition based on Speech Recognition Web API.
Downloads
20
Maintainers
Readme
react-speech-recognizer
React Component for Speech Recognition.
This HOC component allows to get Speech Recognition capabilities into your app. By wrapping your component on it, you can have it changing depending on the transcripts you get back or the SpeechRecognizer.status
.
It relies on the Web Speech Recognition API and if it's not supported in the browser, it logs a warn
, renders nothing and calls the onError
prop (if provided).
It creates a SpeechRecognition
instance internally and exposes its events through props
in the component.
Use it like:
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { SpeechRecognizer } from 'react-speech-recognizer-component';
function App() {
return (
<div className="App">
<h1>Speech to text test with React Speech Recognizer</h1>
<SpeechRecognizer
startSpeechRecognition={true}
onError={this.onError}
>
{({status, results, formattedResults, transcripts, error}) => {
return (
<>
{transcripts && transcripts.length && <p>{transcripts.join(', ')}</p>}
</>
);
}}
</SpeechRecognizer>
</div>
);
}
export default App;
props
Same as the ones that the SpeechRecognition
object would accept, plus the one that says start recognizing, yo!.
startSpeechRecognition
: flag that iftrue
the recoznizer starts attempting to listen on your microphone.grammars
: Accepts a string in the (beautiful!) JSGF Format.continuous
: Flag that iftrue
more than one result per recognition is returned.interimResults
: Flag that iftrue
returns results that are not final.maxAlternatives
: Yup, the most alternatives that can be returned. Keep in mind that settingcontinous
tofalse
(which is the default value)lang
: ISO string with the language.
(Some) of the SpeechRecognition
events are also exposed as props
.
onStart
: Callback run on theonstart
event of theSpeechRecognizer
instance.onError
: Callback run on theonerror
event of theSpeechRecognizer
instance. One of the cases when this is executed whenSpeechRecognition
is not supported by the browser.
Next steps
- Probably start over with a different idea in mind, based on what I learn while working on Guess The Movie (repo here). It'd be a
VoiceCommandRecognizer
instead. :)