在我们的学习平台中，我已成功实现了图像识别与拼音提取功能。为了进一步提升用户体验，让用户“看得见也听得懂”，我们集成了百度智能云的语音合成（TTS）API，实现了拼音内容的普通话朗读功能。本文将介绍从环境配置、后端接口编写到前端播放的完整接入过程。

---

🧩 背景与目标

在语言学习平台中，听力反馈 是不可或缺的一环。用户需要在识别出汉字和拼音之后，点击按钮即能听到标准发音，从而加深记忆与理解。

虽然我们尝试过腾讯云语音合成，但由于接口复杂度与访问问题，最终改用百度智能云，凭借其免费额度、文档友好和接入便捷的优势，成功实现了拼音朗读功能。

---

✅ 一、准备工作：配置百度智能云账号

1. 注册百度智能云账号

访问：https://cloud.baidu.com
完成注册与实名认证。

---

2. 创建语音合成应用

• 进入控制台 → 产品服务 → 语音技术 → 语音合成 TTS

• 创建新应用，命名如：tts-pinyin-app

• 记录下生成的 API Key 与 Secret Key

---

3. 配置环境变量

在项目根目录下创建或编辑 .env 文件：

BAIDU_API_KEY=你的APIKey
BAIDU_SECRET_KEY=你的SecretKey

确保你的项目能正确读取这些变量（例如使用 dotenv 或 Next.js 默认支持的环境变量机制）。

---

🔧 二、后端实现：创建百度 TTS 接口

在 /app/api/tts/baidu/route.ts 中创建新的 API 路由：

import { NextRequest } from "next/server";

// 获取百度 access_token
async function getBaiduAccessToken(apiKey: string, secretKey: string) {
  const res = await fetch(
    `https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=${apiKey}&client_secret=${secretKey}`,
    { method: "POST" }
  );
  const data = await res.json();
  return data.access_token;
}

export async function POST(req: NextRequest) {
  try {
    const { text } = await req.json();

    const apiKey = process.env.BAIDU_API_KEY!;
    const secretKey = process.env.BAIDU_SECRET_KEY!;
    const accessToken = await getBaiduAccessToken(apiKey, secretKey);

    const ttsRes = await fetch(
      `https://tsn.baidu.com/text2audio?tex=${encodeURIComponent(
        text
      )}&lan=zh&cuid=tts_demo&ctp=1&tok=${accessToken}&per=0&spd=5&pit=5&vol=5&aue=6`,
      { method: "POST" }
    );

    const arrayBuffer = await ttsRes.arrayBuffer();
    const audioBase64 = Buffer.from(arrayBuffer).toString("base64");

    return new Response(
      JSON.stringify({ audio: audioBase64 }),
      { status: 200, headers: { "Content-Type": "application/json" } }
    );
  } catch (error: any) {
    console.error("Baidu TTS Error:", error);
    return new Response(
      JSON.stringify({ error: "Baidu TTS failed", detail: error.message }),
      { status: 500, headers: { "Content-Type": "application/json" } }
    );
  }
}

---

🎧 三、前端实现：点击按钮播放拼音音频

在你的前端组件中，为拼音旁添加播放按钮：

<button
  onClick={async () => {
    const res = await fetch("/api/tts/baidu", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ text: pinyin }),
    });

    const data = await res.json();

    if (data.audio) {
      const audio = new Audio("data:audio/mp3;base64," + data.audio);
      audio.play();
    }
  }}
  style={{
    background: "none",
    border: "none",
    cursor: "pointer",
    marginLeft: 4,
    verticalAlign: "middle",
    padding: 0,
  }}
  aria-label="Play pronunciation"
>
  ▶️
</button>

📌 提示：可以为每个识别结果后添加按钮，实现点击即播功能。

---

🔊 四、效果展示

• 📷 拍照 → ✅ 获取拼音 → 🔘 点击播放

• ⬆️ 上传图片 → ✅ 识别结果显示 → 🎧 播放朗读

适用于：汉字识别学习平台、拼音语音教学、儿童启蒙教育等场景。

---

🔍 五、常见问题解答

问题	原因与解决
接口报错或 500	检查 API Key 和 Secret Key 是否正确；百度账户是否欠费
没有声音播放	检查是否添加 "data:audio/mp3;base64," 前缀；浏览器是否支持 Audio
如何换发音人？	修改接口参数 per=0~4，如 0 女声，1 男声，详见百度官方文档

---

🧠 六、总结

功能	实现方式
📖 拼音朗读功能	接入百度 TTS 接口实现
🔐 权限控制	使用 API Key / Secret Key + access_token
🧑‍🏫 用户交互	一键点击即可朗读所识别的拼音
🎯 适用场景	中文学习、儿童教育、AI识别讲解平台

通过以上步骤，我在 Next.js 项目中实现拼音的普通话朗读功能，增强学习效果和交互性！

---

📚 附录与参考

• 📘 百度语音合成官方文档（Text To Speech）

• 🛠️ 百度智能云控制台

• 💡 本项目适配 Next.js 14，基于 App Router 路由规范

---