HTML CSS 和 JavaScript 中的文本到语音转换器
原创
HTML CSS 和 JavaScript 中的文本到语音转换器
原创
泽霖
发布于 2023-11-12 14:37:36
发布于 2023-11-12 14:37:36
代码可运行
运行总次数：0
代码可运行
创建一个将任何文本转换为语音的项目可能是一个有趣且可以提升技能的项目，特别是在学习 HTML、CSS 和 JavaScript 的过程中。在这篇博客中，您将学到如何使用 HTML、CSS 和 JavaScript 构建一个文本到语音转换器。我最近也分享了一个关于如何使用 JavaScript 构建生成 OTP 代码的博客，相信那个项目对你也会有帮助。
HTML、CSS 和 JS 文本到语音转换器教程
使用 JavaScript 创建文本到语音转换器的步骤
要使用 HTML、CSS 和纯 JavaScript 创建一个文本到语音转换器，请按照以下逐行步骤进行：
- 创建一个文件夹。你可以将这个文件夹命名为你想要的任何名称，并在这个文件夹中创建下面提到的文件。
- 创建一个
index.html文件。文件名必须为index，扩展名为.html。 - 创建一个
style.css文件。文件名必须为style，扩展名为.css。 - 创建一个
script.js文件。文件名必须为script，扩展名为.js。
一旦你创建了这些文件，请将给定的代码粘贴到指定的文件中。如果你不想这样做，可以向下滚动并通过点击给定的下载按钮免费下载计算器的所有源代码文件。
首先，将以下代码粘贴到你的 index.html 文件中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Text to Speech Converter</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<header>Text to Speech Converter</header>
<textarea placeholder="Enter text"></textarea>
<button>Convert to Speech</button>
</div>
<script src="script.js" defer></script>
</body>
</html>其次，将以下代码粘贴到你的 style.css 文件中：
/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #87a5f8;
}
.container {
position: relative;
max-width: 350px;
width: 100%;
background: #fff;
border-radius: 12px;
padding: 20px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
header {
font-size: 18px;
color: #333;
font-weight: 500;
text-align: center;
}
textarea {
width: 100%;
height: 180px;
border-radius: 8px;
margin: 20px 0;
padding: 10px 15px;
resize: none;
outline: none;
border: 1px solid #aaa;
}
button {
width: 100%;
padding: 14px 0;
border: none;
border-radius: 8px;
color: #fff;
background: #6e93f7;
cursor: pointer;
transition: all 0.3s ease;
}
button:hover {
background: #4070f4;
}第三，将以下代码粘贴到你的 script.js 文件中：
const textarea = document.querySelector("textarea");
const button = document.querySelector("button");
let isSpeaking = true;
const textToSpeech = () => {
const synth = window.speechSynthesis;
const text = textarea.value;
if (!synth.speaking && text) {
const utternace = new SpeechSynthesisUtterance(text);
synth.speak(utternace);
}
if (text.length > 50) {
if (synth.speaking && isSpeaking) {
button.innerText = "Pause";
synth.resume();
isSpeaking = false;
} else {
button.innerText = "Resume";
synth.pause();
isSpeaking = true;
}
} else {
isSpeaking = false;
button.innerText = "Speaking";
}
setInterval(() => {
if (!synth.speaking && !isSpeaking) {
isSpeaking = true;
button.innerText = "Convert to Speech";
}
});
};
button.addEventListener("click", textToSpeech);如果在创建文本到语音转换器时遇到任何困难，或者你的代码没有按预期工作，你可以通过点击下载按钮免费下载此文本到语音转换器的源代码文件，你还可以通过点击查看演示按钮查看此卡片滑块的实时演示。
我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
