Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
b7201db
wrote speech to text module
magician11 Oct 3, 2016
5ef1f2e
building lib correctly
magician11 Oct 3, 2016
088155d
removed example and improved README
magician11 Oct 3, 2016
01aa580
improved readme
magician11 Oct 3, 2016
fb055c5
remove lib from github repo
magician11 Oct 3, 2016
5c7431e
added demo
magician11 Oct 4, 2016
f61e5a4
added onfinsished listening callback
magician11 Oct 4, 2016
bcdc164
clearing final transcript variable after callback id called
magician11 Oct 6, 2016
218fcf2
Add support for mozilla and stopListening
bring2me Nov 20, 2017
f6eae8a
fix js logical errors
bring2dip Dec 1, 2017
b297212
Merge pull request #1 from bring2dip/master
magician11 Dec 4, 2017
0ca7417
updated README to show stopListening function
magician11 Dec 4, 2017
d07039a
updated README
magician11 Nov 18, 2018
72d91f9
cleaned up build
magician11 Nov 19, 2018
49a9733
added restart method
magician11 Nov 20, 2018
f7901f1
updated version number
magician11 Nov 20, 2018
d7357be
updated README
magician11 Nov 20, 2018
dd91e6e
explicitly showing code for use cases
magician11 Nov 20, 2018
d4ed220
simplified use case text
magician11 Nov 20, 2018
6a39135
prepublish to prepublishOnly
magician11 Nov 20, 2018
60495a8
simplified module
magician11 Dec 8, 2018
d589b52
added link to support languages
magician11 Dec 28, 2018
c064755
removed build process
magician11 Jun 15, 2025
b954504
improved docs to use modern react hooks
magician11 Jun 16, 2025
cd99ca5
added prettier file for dev
magician11 Jun 16, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions .babelrc

This file was deleted.

27 changes: 0 additions & 27 deletions .eslintrc

This file was deleted.

2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1 +1 @@
/node_modules
.DS_Store
3 changes: 3 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.git
.gitignore
.DS_Store
5 changes: 5 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"singleQuote": true,
"arrowParens": "avoid",
"trailingComma": "none"
}
12 changes: 6 additions & 6 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
The MIT License (MIT)
MIT License

Copyright (c) 2014 Stephen J. Collings, Matthew Honnibal, Pieter Vanderwerff
Copyright (c) 2025 Andrew Golightly

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand All @@ -9,13 +9,13 @@ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
91 changes: 68 additions & 23 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,39 +1,84 @@
# react-speech-recognition-input
A react speech recognition component for chrome browser
# Speech To Text

## install
A speech recognition module to convert speech into text.

$ npm install react-speech-recognition-input --save
## Install

## Usage
`npm install speech-to-text`

```
import React from 'react';
import ReactDOM from 'react-dom';
import Input from 'react-speech-recognition-input';
## Typical Usage

ReactDOM.render((
<Input className="test" onChange={(value) => console.log(value)} onEnd={(value) => console.log(value)} />
), document.getElementById('chart'));
Here is the module being used in a React component

```
```javascript
import React, { useState, useEffect } from 'react';
import SpeechToText from 'speech-to-text';

const MyComponent = () => {
const [interimText, setInterimText] = useState('');
const [finalisedText, setFinalisedText] = useState([]);
const [listening, setListening] = useState(false);
const [error, setError] = useState(null);
const [listener, setListener] = useState(null);

useEffect(() => {
const onAnythingSaid = text => {
setInterimText(text);
};

##Example
const onEndEvent = () => {
if (listening) {
listener?.startListening();
}
};

*run demo*
const onFinalised = text => {
setFinalisedText(prev => [text, ...prev]);
setInterimText('');
};

try {
const speechListener = new SpeechToText(onFinalised, onEndEvent, onAnythingSaid);
setListener(speechListener);
} catch (error) {
setError(error.message);
}

// Cleanup function
return () => {
listener?.stopListening();
};
}, [listening, listener]);

// Component JSX would go here...
}
```
npm install
npm start

## API

### The constructor

- onFinalised - a callback that will be passed the finalised transcription from the cloud. Slow, but accuate.
- onEndEvent - a callback that will be called when the end event is fired (speech recognition engine disconnects).
- onAnythingSaid - (optional) a callback that will be passed interim transcriptions. Fairly immediate, but less accurate than finalised text.
- language - (optional) the language to interpret against. Default is US English, and the supported languages are listed [here](https://cloud.google.com/speech-to-text/docs/languages).

The constructor will throw an error if speech recognition is not supported by the browser. [Browser support](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#Browser_compatibility) includes Chrome, Edge, and Safari.

```javascript
if (!('webkitSpeechRecognition' in window)) {
throw new Error("This browser doesn't support speech recognition. Try Google Chrome.");
}
```
open [http://localhost:8080/](http://localhost:8080/)

## props
### startListening

Initiates listening to speech input.

### stopListening

* `className`: the css class name of the wrapper.
* `onChange`: run when you start speaking, the value is what you say.
* `onEnd`: run when you stop speaking, the value is what you say.
Does just that. Stops listening.

## License

react-speech-recognition-input is released under the MIT license.
MIT
10 changes: 0 additions & 10 deletions example/app.js

This file was deleted.

11 changes: 0 additions & 11 deletions example/index.html

This file was deleted.

20 changes: 0 additions & 20 deletions example/server.js

This file was deleted.

16 changes: 0 additions & 16 deletions example/webpack.config.js

This file was deleted.

23 changes: 0 additions & 23 deletions lib/index.css

This file was deleted.

127 changes: 0 additions & 127 deletions lib/index.js

This file was deleted.

Binary file removed lib/mic-animate.gif
Binary file not shown.
Binary file removed lib/mic.gif
Binary file not shown.
Loading