JavaScript 实现文本转语音功能

2025/5/4 7:39:43 来源：https://blog.csdn.net/bjjgff/article/details/143635783 浏览: 次关键词：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;
}