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;
}