Build a React.js Text to Speech App Using react-speech-kit Library

300+ Interview Questions & Answers, Documentation, Real-time scenarios, Quiz download the APP:

https://play.google.com/store/apps/details?id=com.frontendinterviewqa  

-------------------------------------------------------------------------------------------------------x------

Hello Everyone,

Nowadays, Text to Speech conversion has been used in many of our real-time applications. Have you wondered how they will do that? Have you thought of implementing it in your application?  It will be awesome and gives a good user experience.

So In this tutorial, we will learn how to integrate Text to speech converter in our react application. For this, we need to use a package called react-speech-kit. It's a 3rd party library we need to install in our react application.

Command to install the package:

npm i react-speech-kit

If you are facing any issues with dependencies then try either of the below commands.

npm i react-speech-kit --force

npm i react-speech-kit -legacy-peer-deps




Now once it's installed successfully. Verify it in package.json. 

Step-1:

Import the useSpeechSynthesis from package:

import { useSpeechSynthesis } from 'react-speech-kit';

Step-2: 

Create textarea and buttons. Once the user enters data in the textarea and clicks on the button we need to convert it to speech.

<textarea className="textAreaStyle" onChange={(e)=>{}}></textarea>

<button className="buttonStyle" onClick={()=>{}}>Listen</button>

Step-3: 

Add styles to textarea and button in App.css

.textAreaStyle{

    width: 500px;

    border-radius: 12px;

    height: 163px;

    border-width: 10px;

    border-color: cadetblue;

    margin-top: 25px;

    margin-bottom: 49px;

  }

 

  .buttonStyle{

    padding: 10px;

    border-radius: 11px;

    font-weight: bold;

    border-width: 4px;

    margin-left: -334px;

  }

Step-4:

Create a variable to store data in textarea using useState.

Now set the data from the text area using SetState.

Another Variable is used in the process of Text Conversion to speech.

  const [text,setText] = useState('');

  const {speak} = useSpeechSynthesis();

  <textarea className="textAreaStyle" onChange={(e)=>{setText(e.target.value)}}></textarea>

Step-5:

Button Changes:

  const handleOnClick = () => {

    speak({text:text})

  }

   <button className="buttonStyle" onClick={()=>{handleOnClick()}}>Listen</button>

Entire Code in App.js & App.css:

import React, { useState } from "react";

import { Container, Segment } from "semantic-ui-react";

import './App.css'

import { useSpeechSynthesis } from 'react-speech-kit';

function App() {

  const [text,setText] = useState('');

  const {speak} = useSpeechSynthesis();

  const handleOnClick = () => {

    speak({text:text})

  }

  return (

    <Container>

      <Segment>

        <h1>Text to Speech Converter in React</h1>

        <textarea className="textAreaStyle" onChange={(e)=>{setText(e.target.value)}}></textarea>

        <button className="buttonStyle" onClick={()=>{handleOnClick()}}>Listen</button>

      </Segment>

    </Container>

  );

}

export default App;

.textAreaStyle{

    width: 500px;

    border-radius: 12px;

    height: 163px;

    border-width: 10px;

    border-color: cadetblue;

    margin-top: 25px;

    margin-bottom: 49px;

  }

 

  .buttonStyle{

    padding: 10px;

    border-radius: 11px;

    font-weight: bold;

    border-width: 4px;

    margin-left: -334px;

  }

Expected OUTPUT: