Startsys React Speech Recognition v2

A React application demonstrating the usage of the startsys-react-speech-recognition npm package. This package allows your React applications to leverage the Web Speech API for speech recognition functionality.

Installation

First, clone this repository to your local machine using:

git clone https://github.com/tulaneadam/startsys-react-speech-recognition-v2.git

Navigate to the directory:

cd startsys-react-speech-recognition-v2

Install the required dependencies:

npm install

Usage

To start the application in development mode:

npm start

This will start the application and open a new browser tab pointing to http://localhost:3000 or another open port if 3000 is being used.

The application provides a simple interface with a microphone icon and a text input field. Click on the microphone icon and start speaking. Your speech will be converted to text and populated in the text input field.

Deployment

To build the application for production, run:

npm run build

This will create a build/ directory with all the compiled files. Your application is now ready for deployment.

Using the startsys-react-speech-recognition npm Package

Startsys-react-speech-recognition

This application makes use of the startsys-react-speech-recognition npm package. If you wish to use this package in your own projects, install it via npm:

npm install startsys-react-speech-recognition

Import it in your React component:

import Speech from 'startsys-react-speech-recognition';

And use it in your JSX:

<Speech onSpeech={(text) => console.log(text)} />

This will render a microphone icon that, when clicked, starts the speech recognition process. The recognized text can be logged to the console with the line above added to the react component, or the text can be added to an input element as shown in this demo app with the below App.js file.

Please ensure that the users' browser supports the Web Speech API.

import React, { useState } from "react";
import Speech from 'startsys-react-speech-recognition';
import { FaMicrophone } from 'react-icons/fa';

function App() {
  const [transcript, setTranscript] = useState("");
  
  const handleSpeech = (command) => {
    setTranscript(command);
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Speech Recognition App</h1>
        <h3>Please click on the mic to begin the speech recognition demo.</h3>
        <div className="input-group">
          <Speech onSpeech={handleSpeech}>
            <FaMicrophone className="fas fa-2x" />
          </Speech>
          <input type="text" value={transcript} readOnly />
        </div>
      </header>
    </div>
  );
}

export default App;

Contributing

Contributions are welcome. Please open an issue or submit a pull request.

License

This project is licensed under the MIT License.