JavaScript 实现文本转语音功能
全篇大概2000 字（含代码），建议阅读时间10分钟。
引言
我将向大家展示如何使用 JavaScript 和 Web Speech API 快速实现一个“文本转语音”的 Web 应用。通过这个教程，你将了解如何让浏览器将输入的文本朗读出来。
预览效果
一、需求
我们将构建一个简单的网页应用，用户只需要在文本框中输入想要朗读的文字，然后点击按钮即可播放语音。
1.文本框
2.按钮
二、实现步骤
2.1 项目准备
创建前端工程，项目名称自拟。
2.2 HTML结构
首先，我们需要定义一个基本的 HTML 页面。这个页面将包含：
一个文本输入区域（textarea）、一个按钮（button），用于触发语音播放。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本转换为语音</title>
<link rel="stylesheet" href="styles.css"> <!-- 引入样式表 -->
</head>
<body>
<!-- 主容器 -->
<div class="container">
<h1>文本转语音</h1>
<!-- 文本输入框 -->
<textarea id="textToRead" placeholder="输入文本"></textarea><br>
<!-- 播放按钮 -->
<button onclick="speakText()">播放语音</button>
</div>
<!-- 引入 JavaScript 文件 -->
<script src="script.js"></script>
</body>
</html>
2.3 JavaScript逻辑
接下来，我们需要为文本转语音功能编写 JavaScript 代码。使用 Web Speech API 中的 SpeechSynthesis 接口来实现语音播放。
function speakText() {
// 获取文本输入框的内容
const text = document.getElementById('textToRead').value;
if (text.trim() === '') return; // 如果文本为空，则不执行
const utterance = new SpeechSynthesisUtterance(text); // 创建语音合成实例
utterance.lang = 'zh-CN'; // 设置语言为中文
utterance.volume = 1; // 设置音量（0 到 1）
utterance.rate = 1; // 设置语速（0.1 到 10）
utterance.pitch = 1; // 设置音调（0 到 2）
window.speechSynthesis.speak(utterance); // 播放语音
}
2.4 CSS样式
body {
font-family: Arial, sans-serif;
background-color: #f3f4f6;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
color: #333;
margin-bottom: 20px;
}
textarea {
width: 100%;
height: 100px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
resize: none;
font-size: 16px;
}
button {
margin-top: 15px;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
三、测试
现在，我们已经完成了所有代码的编写。将 index.html、script.js 和 styles.css 文件保存在同一目录下，打开 index.html 即可在浏览器中测试这个文本转语音功能。
1. 在文本框中输入想要朗读的文字。
2. 点击 “播放语音” 按钮，浏览器将朗读输入的文字内容。
四、总结
通过这篇教程，我们使用 HTML、CSS 和 JavaScript 构建了一个简单的文本转语音应用。该项目不仅展示了 Web Speech API 的强大功能，同时也展示了如何将前端技术结合起来实现有趣的功能。
希望这篇文章对你有所帮助，如果有任何问题或改进建议，欢迎在评论区留言！
相关文章
你从未见过的 10 个令人惊叹的 JavaScript 技巧
原文地址：https://blog.csdn.net/bjjgff/article/details/143635783
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！