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

Welcome folks today in this blog post we will be building text to speech using react-speech-kit library in browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new react.js project using the below command as shown below

npx create-react-app sampleapp

npm i react-speech-kit

And now you will be seeing the below directory structure of the react.js app

Now you need to copy paste the below code inside the App.js file

App.js

import "./styles.css";
import React from "react";

import { useSpeechSynthesis } from "react-speech-kit";
export default function App() {
  const [value, setValue] = React.useState("");
  const { speak } = useSpeechSynthesis();
  return (
    <div className="speech">
      <div className="group">
        <h2>Text To Speech Converter Using React Js</h2>
      </div>
      <div className="group">
        <textarea
          rows="10"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        ></textarea>
      </div>
      <div className="group">
        <button onClick={() => speak({ text: value })}>Speech</button>
      </div>
    </div>
  );
}

import "./styles.css";

import React from "react";

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

export default function App() {

const [value, setValue] = React.useState("");

const { speak } = useSpeechSynthesis();

return (

<h2>Text To Speech Converter Using React Js</h2>

</div>

<textarea

rows="10"

value={value}

onChange={(e) => setValue(e.target.value)}

></textarea>

</div>

<button onClick={() => speak({ text: value })}>Speech</button>

</div>

);

}

As you can see we are importing the react-speech-kit library at the top and then we have the textarea where the user can write any text that they want to convert to audio or speech and let the person speak those words as we click the text to speech button as shown below