Text To Speech Using React Js (React Hooks)

INTRODUCTION

Text to speech( TTS) is a natural language modeling process that requires changing units of textbook into units of speech for audio donation. This is the contrary of speech to textbook, where a technology takes in spoken words and tries to directly record them as textbook. Text to speech is now common in technologies that seek to render audio affair from digital textbook to help those who are unfit to read, or for other kinds of uses. 

When you take an original look at the React Hooks attestation, you ’ll see that there are several Hooks that we can use for our operations. You can indeed produce your own. Some of the popular bones include 

useState : returns a stateful value 

useEffect : perform side goods from function factors 

useContext : accepts a environment objects and returns current environment value 

useCallback : pass an inline message and an array of dependencies 

PREREQUISITE

- NODE JS, NPM/YARN , REACT should have already installed in your computer.

-Knowledge how to use the third-party library

- Basic knowledge of 

• REACT JS
• nodemon 

and other necessary packages

CREATING PROJECT

To Create React Application Type: 

• yarn: yarn create react-app appname
• npm: npx create-react-app appname

Now go to todo app and run yarn start (if using Yarn) OR npm start (if using npm). Your project should now be served on localhost:3000. (by default the port is 3000.)

CODE EXAMPLES

• edit App.js   :  get rid of all the code inside return function and add your imported component

  
import './App.css';
import Textspeech from './Textospeech'

function App() {
  return (
    <Textospeech/>
  );
}

export default App;
  
  

• creating component Textospeech.js  : Now Code the Textospeech.js file by below code

    
import React ,{useState} from "react";
import { useSpeechSynthesis } from "react-speech-kit";
import "bootstrap/dist/css/bootstrap.css"
import {Button} from 'react-bootstrap'

const Speech = () => {
  const [value, setValue] =useState("");
  const { speak,cancel } = useSpeechSynthesis();
  return (
    <div className="container text-center mt-4">
      <div>
        <h2>Text To Speech Converter Using React Js</h2>
      </div>
      <br/>
      <div>
        <textarea className="form-control" 
          value={value}
          rows="10"
          placeholder="Write Your Text Here"
          onChange={(e) => setValue(e.target.value)}
        ></textarea>
      </div>

      <br/>
      <div>
        <Button onClick={() => speak({ text: value })}>Speech</Button>

        <Button className="ms-4 btn-danger" onClick={() => cancel()}>Stop</Button>
      </div>
    </div>
  );
};
export default Speech;

OUTPUT/RESULTS:

Run your project by typing npm start or yarn start