使用 ReactJS 创建文本到语音应用程序

React.js： React 是一个声明式、高效且灵活的 JavaScript 库，用于构建用户界面。它是 MVC 中的“V”。 ReactJS 是一个开源的、基于组件的前端库，只负责应用程序的视图层。它由 Facebook 维护。

在 React JS 中使用 Recharts 创建折线图的步骤：

第 1 步：创建 React 项目

npx create-react-app my-app

第 2 步：更改您的目录并输入您的主文件夹图表为

cd my-app

项目结构如下：

第 2 步：通过以下命令安装 react-speech-kit：

npm i react-speech-kit

第 3 步：在App.js上编写代码：

Javascript

import './App.css';
import Speech from './speech';
function App() {
  return (
    

      
    
  );
}
export default App;

第 4 步：在Speech.js文件中编写代码

Javascript

import React from "react";
import { useSpeechSynthesis } from "react-speech-kit";
const Speech = () => {
  const [value, setValue] = React.useState("");
  const { speak } = useSpeechSynthesis();
  return (
    

      

        
Text To Speech Converter Using React Js
      
      

         setValue(e.target.value)}
        >
      
      

         speak({ text: value })}>
          Speech
        
      
    
  );
};
export default Speech;

第 5 步：在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);;
}
h2 {
  margin-bottom: 10px;
  text-align: center;
}

第 6 步：运行应用程序的步骤：打开终端并键入以下命令。

npm start

输出：打开浏览器，我们的项目显示在 URL http://localhost:3000/