构建文本转语音网站-css教程-PHP中文网

构建文本转语音网站

WBOY

发布： 2024-08-22 06:33:33

原创

670 人浏览过

Build a Text to Speech Website

介绍

各位开发者大家好！我很高兴向大家介绍我的最新项目：一个简单但功能强大的文本到语音生成器。该项目是深入研究 JavaScript 功能的绝佳方式，特别是在处理用户输入、与 Web Speech API 交互以及动态更新 DOM 方面。无论您是初学者还是想扩展 JavaScript 知识，这个文本转语音生成器都是一个很棒的项目。

项目概况

文本到语音生成器是一个基于网络的应用程序，允许用户使用浏览器的语音合成功能将文本转换为口语单词。该项目展示了如何创建交互式且可访问的用户界面，同时通过将文本输入转换为语音来提供实时反馈。

特征

用户友好的界面：简单直观的设计，实现无缝用户交互。
实时语音：在您键入并单击发言按钮时立即将输入文本转换为语音。
停止功能：允许用户在播放过程中随时停止语音。
响应式设计：确保在各种屏幕尺寸和设备上获得一致的体验。

使用的技术

HTML：构建网页和输入元素。
CSS：设置界面样式，确保简洁且响应灵敏的设计。
JavaScript：处理语音合成逻辑和用户交互。

项目结构

以下是项目结构的快速浏览：

Text-to-Speech-Generator/
├── index.html
├── styles.css
└── script.js

登录后复制

index.html：包含文本转语音生成器的 HTML 结构。
styles.css：包含 CSS 样式以增强应用程序的外观和响应能力。
script.js：管理语音合成逻辑和用户交互。

安装

要开始该项目，请按照以下步骤操作：

克隆存储库：

git clone https://github.com/abhishekgurjar-in/Text-to-Speech-Generator.git

登录后复制

打开项目目录:
```
cd Text-to-Speech-Generator
```
登录后复制
运行项目:
- 在网络浏览器中打开 index.html 文件以开始使用文本转语音生成器。

用法

在网络浏览器中打开网站。
在提供的文本区域中输入您的文本。
点击“朗读文本”按钮即可听到大声朗读的文本。
如果您想停止演讲，请点击“停止”按钮。

代码说明

超文本标记语言

index.html 文件提供了文本转语音生成器的基本结构，包括用于用户输入的文本区域和触发语音合成的按钮。这是一个片段：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Text to Speech Generator</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1 class="title">Text to Speech</h1>
    <div class="container">
      <textarea
        name="text"
        class="text"
        placeholder="Type Text Here..."
      ></textarea>
      <div class="buttons">
        <button class="speak-btn">Speak Text</button>
        <button class="stop-btn">Stop</button>
      </div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

登录后复制

CSS

styles.css 文件设置文本转语音生成器的样式，提供干净且用户友好的布局。以下是一些关键样式：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: white;
}

.title {
  text-align: center;
  font-size: 40px;
  margin: 20px;
  padding: 10px;
}

.container {
  margin: 20px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.text {
  background-color: rgb(242, 241, 241);
  color: black;
  width: 600px;
  height: 400px;
  margin: 10px;
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, 0.51);
  display: block;
  border-radius: 10px;
}

.buttons {
  display: flex;
}

.speak-btn, .stop-btn {
  width: 200px;
  height: 40px;
  margin: 10px;
  padding: 10px;
  border: none;
  color: white;
  background-color: rgb(63, 63, 255);
  border-radius: 5px;
  font-size: 15px;
  text-align: center;
  cursor: pointer;
}

.stop-btn {
  background-color: rgb(255, 63, 63);
}

.footer {
  margin: 50px;
  text-align: center;
}

登录后复制

JavaScript

script.js 文件处理语音合成逻辑，将文本输入转换为语音并管理停止功能。这是一个片段：

document.addEventListener('DOMContentLoaded', function() {
  const textEl = document.querySelector(".text");
  const speakEl = document.querySelector(".speak-btn");
  const stopEl = document.querySelector(".stop-btn");

  speakEl.addEventListener('click', function() {
    speakText(textEl.value);
  });

  stopEl.addEventListener('click', function() {
    stopSpeaking();
  });

  function speakText(text) {
    window.speechSynthesis.cancel();
    const utterance = new SpeechSynthesisUtterance(text);
    window.speechSynthesis.speak(utterance);
  }

  function stopSpeaking() {
    window.speechSynthesis.cancel();
  }
});

登录后复制