Create a text to speech application using ReactJS
React.js: React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It’s ‘V’ in MVC. ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application. It is maintained by Facebook.
Steps to Create Line Charts using Recharts in React JS :
Step 1: Create React Project
npx create-react-app my-app
Step 2: Change your directory and enter your main folder charting as
cd my-app
The project Structure is as follows:
Step 2: Installing react-speech-kit by the below command:
npm i react-speech-kit
Step 3: Write code on App.js:
Javascript
import './App.css' ;
import Speech from './speech' ;
function App() {
return (
<div className= "App" >
<Speech />
</div>
);
}
export default App;
|
Step 4: Write code in the Speech.js file
Javascript
import React from "react" ;
import { useSpeechSynthesis } from "react-speech-kit" ;
const Speech = () => {
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>
);
};
export default Speech;
|
Step 5: Write code on App.css
CSS
* {
margin : 0 ;
padding : 20px ;
box-sizing: border-box;
}
body {
font-family : sans-serif ;
}
.Speech {
width : 50px ;
}
.group {
margin : 7px 0 ;
}
textarea {
width : 100% ;
padding : 5px 10px ;
border : 1px solid rgb ( 228 , 20 , 20 );
outline : none ;
border-radius: 3px ;
}
button {
width : 100% ;
display : block ;
padding : 10px 22px ;
color : rgb ( 10 , 10 , 10 );
font-weight : bold ;
cursor : pointer ;
outline : none ;
background : rgb ( 227 , 240 , 219 );
;
}
h 2 {
margin-bottom : 10px ;
text-align : center ;
}
|
Step 6: Step to run the application: Open the terminal and type the following command.
npm start
Output: Open the browser and our project is shown in the URL http://localhost:3000/
Last Updated :
23 Jun, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...