Text-to-Speech App

This is a simple Text-to-Speech (TTS) app built using HTML, TailwindCSS and JavaScript and the Web Speech API. The app allows users to input text, and it converts the text into speech, providing an audio output of the input text.

Features

• Input text and convert it to speech.
• Adjust the speech rate (speed) and pitch.
• Clear the input text and stop the speech.

Demo

You can try out the live demo of the app here.

Table of Contents

• Getting Started
  • Prerequisites
  • Installation
  • Running the App
• Usage
  • Input Text
  • Adjusting Speech Parameters
  • Controlling Speech Playback
• How it Works
• Components
• Contributions and Issues
• License

Getting Started

Prerequisites

To run the app locally, you need to have the following installed on your machine:

• Node.js (version 12 or higher)
• npm (Node Package Manager) or yarn

Installation

1. Clone this repository:

git clone https://github.com/Victorola-coder/text2speech.git

2. Navigate to the project directory:

cd text2speech

3. Install the dependencies:

npm install

Running the App

Start the development server:

npm run dev 

Create a new command line and watch the tailwindcss

npm run watch

Open your web browser and visit http://localhost:5173 to access the app.

Usage

Input Text

In the app, you can input any text you want to convert to speech. Type or paste your desired text into the textarea provided.

Adjusting Speech Parameters

You can control the speech rate (speed) and pitch of the generated speech. Use the input fields provided for rate and pitch adjustments. The default rate and pitch values are 1.

How it Works

The app is built using React and utilizes the Web Speech API, which is natively supported in modern web browsers. The API provides a SpeechSynthesis interface that enables text-to-speech functionality. The SpeechSynthesisUtterance object represents a speech request and allows customization of speech parameters, such as rate and pitch.

The main components of the app are:

• App: The root component that holds the state for the input text and speech options. It also handles the speech synthesis and controls playback.
• TextInput: Renders a textarea where users can input their desired text.
• SpeechControls: Provides buttons to control the speech playback, such as play, pause, and stop. It also includes options to adjust the speech rate and pitch.

The app uses event listeners and state updates to handle changes in the input text and speech options. When the user clicks the play button, the app creates a new SpeechSynthesisUtterance object with the input text and specified options, and then it calls the speak() method on the SpeechSynthesis interface to start the speech playback.

Components

• App: The root component that holds the state and logic for the text-to-speech functionality.
• TextInput: Renders the input textarea for users to input their desired text.
• SpeechControls: Renders buttons and input fields for controlling the speech parameters and playback.

Contributions and Issues

If you find any bugs or have suggestions for improvements, feel free to open an issue or submit a pull request on GitHub.

License

This project is licensed under the MIT License. Feel free to use, modify, and distribute the code for your own purposes.

Author

follow me VickyJay