I installed it using npm install --save react-speech-recognition
Resource: react-speech-recognition - npm
The thing is I don’t know how to use it, a simple example of an app using it (maybe on a repository of github) is greatly appreciated…
In my application I have a microphone and once is clicked it triggers a handleClick method and the text will be sent to an array.
I know it doesn’t make sense but I created a component called “SpeechRecognition” that contains the following code:
import React, { PropTypes, Component } from 'react'
import SpeechRecognition from 'react-speech-recognition'
const propTypes = {
// Props injected by SpeechRecognition
transcript: PropTypes.string,
resetTranscript: PropTypes.func,
browserSupportsSpeechRecognition: PropTypes.bool
}
class Dictaphone extends Component {
render() {
const { transcript, resetTranscript, browserSupportsSpeechRecognition } = this.props
if (!browserSupportsSpeechRecognition) {
return null
}
return (
<div>
<button onClick={resetTranscript}>Reset</button>
<span>{transcript}</span>
</div>
)
}
}
Dictaphone.propTypes = propTypes
export default SpeechRecognition(Dictaphone)
Does anybody have an example of a simple application build using SpeechRecognition in React so I can understand how to use to make it work?
After installing this in git:
npm install --save react-speech-recognition
you can simply create a component of SpeechRecognition (in a library of components) which contains this (from https://github.com/FoundersFactory/react-speech-recognition):
import React, { Component } from "react";
import PropTypes from "prop-types";
import SpeechRecognition from "react-speech-recognition";
const propTypes = {
// Props injected by SpeechRecognition
transcript: PropTypes.string,
resetTranscript: PropTypes.func,
browserSupportsSpeechRecognition: PropTypes.bool
};
const Dictaphone = ({
transcript,
resetTranscript,
browserSupportsSpeechRecognition
}) => {
if (!browserSupportsSpeechRecognition) {
return null;
}
return (
<div>
<button onClick={resetTranscript}>Reset</button>
<span>{transcript}</span>
</div>
);
};
Dictaphone.propTypes = propTypes;
export default SpeechRecognition(Dictaphone);
and then just add it to the render function in the App
componenet.
Assuming that I have only Header component and SpeechRecognition component , the App should look like:
import React, {Component} from 'react';
import Header from './components/Header/Header';
import SpeechRecognition from './components/SpeechRecognition/SpeechRecognition';
import './App.css';
class App extends Component {
constructor() {
super();
this.state = {
text: '',
events: []
}
}
render () {
return (
<div className='App'>
<Header />
<SpeechRecognition />
</div>
);
}
}
export default App;
Now you will see a reset button and your speech next to it ! (it recording you by default).
In addition, you can manipulate the recording by adding another buttons or watch the transcript of the words in a textarea.
the render func of the App component now would be (and you can keep playing with that and add your own features):
render () {
return (
<div className='App'>
<Header />
<button className="btn-start">Srart recording</button>
<button className="btn-stop">End recording</button>
<textarea className='output'></textarea>
<SpeechRecognition />
</div>
);
}
}
This question was asked 2 years ago… so I hope it will help others…