/speech-hook

Primary LanguageTypeScript

Speech Recognition App

This project is a simple speech-to-text application built with React and TypeScript using the Web Speech API. It leverages the SpeechRecognition interface to capture and transcribe spoken words in real-time.

Table of Contents

  1. Features
  2. Installation
  3. Usage
  4. Project Structure
  5. Technologies Used
  6. References
  7. License

Features

  • Real-time speech recognition and transcription
  • Supports multiple languages (default is English)
  • Simple and intuitive UI built with React
  • TypeScript for type safety and scalability

Installation

Follow these steps to set up and run the project locally:

  1. Clone the repository:

    git clone https://github.com/yourusername/speech-recognition-app.git
cd speech-recognition-app

  2. Install dependencies:

    npm install

  3. Start the development server:

    npm start

  4. Open your browser and navigate to http://localhost:3000.

Usage

  1. Upon loading the app, you'll see a button to start and stop speech recognition.
  2. Click "Start Recognition" and begin speaking.
  3. Your speech will be transcribed in real-time into the text area.
  4. Click "Stop Recognition" to end the transcription.

Example

  1. Open the app.
  2. Click the Start Recognition button.
  3. Speak any sentence (e.g., "Hello, this is a speech recognition test").
  4. The spoken sentence will appear as text in the designated area.

Project Structure

├── public
├── src
│   ├── components
│   │   └── Main.tsx                    # Custom hook for speech recognition
│   ├── App.tsx                         # Main App component
│   ├── index.tsx                       # Entry point for the React app
│   ├── styles                          # CSS and styling files
├── package.json
├── tsconfig.json
└── README.md

Technologies Used

  • React: A JavaScript library for building user interfaces.
  • TypeScript: A typed superset of JavaScript.
  • SpeechRecognition API: A web API used for speech-to-text functionality.
  • Material UI: A component library for a responsive and modern UI design (if applicable).

References

The following resources were used to build this project:

License

This project is licensed under the MIT License - see the LICENSE file for details.

Feel free to adjust the details based on your specific project setup!