一、技术背景与需求分析

1.1 文字转语音（TTS）技术概述

文字转语音（Text-to-Speech, TTS）技术通过算法将文本转换为自然流畅的语音输出，广泛应用于智能客服、无障碍阅读、教育互动等场景。传统TTS方案存在语音质量差、响应延迟高、方言支持不足等问题，而基于深度学习的云端TTS服务（如百度PAI短文本转语音）通过神经网络模型实现了接近真人发音的效果，支持多语言、多音色及情感调节。

1.2 uni-app框架特性

uni-app是一款基于Vue.js的跨平台开发框架，支持编译到微信小程序、H5、App等多端。其优势在于代码复用率高，但需注意平台差异（如小程序无法直接调用浏览器API）。在语音播报场景中，需结合uni-app的API与云端服务实现功能。

1.3 百度PAI短文本转语音API优势

百度PAI（Platform of Artificial Intelligence）提供的TTS服务具有以下特点：

• 高自然度：支持中文、英文及中英混合，发音接近真人。
• 灵活控制：可调节语速、语调、音量及音色（如男声、女声、童声）。
• 低延迟：云端处理响应快，适合实时场景。
• 低成本：按调用次数计费，适合中小型项目。

二、开发环境准备

2.1 百度智能云账号注册与认证

1. 访问百度智能云官网注册账号。
2. 完成实名认证（个人或企业），获取API调用权限。
3. 进入“控制台”>“人工智能”>“语音技术”>“短文本在线合成”，创建应用并获取API Key和Secret Key。

2.2 uni-app项目初始化

1. 使用HBuilderX创建uni-app项目，选择模板（如默认Vue2模板）。
2. 配置项目目录结构：

   /pages
     /tts-demo  # TTS功能页面
       index.vue
   /static
   /utils
     api.js      # 封装百度API请求

2.3 依赖安装与配置

• 无需额外npm依赖，但需配置网络请求库（如uni.request或axios）。
• 在manifest.json中配置合法域名（百度API域名需加入请求白名单）。

三、百度PAI TTS API集成

3.1 API调用流程

1. 获取Access Token：通过API Key和Secret Key换取临时令牌。
2. 构造请求参数：包括文本内容、音色、语速等。
3. 发送合成请求：将参数提交至百度TTS接口。
4. 处理返回数据：获取音频流或下载URL。

3.2 代码实现

3.2.1 获取Access Token

在utils/api.js中封装：

export async function getAccessToken(apiKey, secretKey) {
  const url = `https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=${apiKey}&client_secret=${secretKey}`;
  const res = await uni.request({ url });
  return res.data.access_token;
}

3.2.2 调用TTS接口

export async function synthesizeSpeech(accessToken, text, options = {}) {
  const defaultOptions = {
    tex: text,
    lan: 'zh', // 中文
    cuid: 'uni-app-tts',
    ctp: 1,
    spd: 5, // 语速（0-15）
    pit: 5, // 语调（0-15）
    vol: 5, // 音量（0-15）
    per: 0  // 音色（0:女声，1:男声，3:情感合成-度逍遥，4:情感合成-度丫丫）
  };
  const params = { ...defaultOptions, ...options };
  const url = `https://tsn.baidu.com/text2audio?${new URLSearchParams(params)}&tok=${accessToken}`;
  // 下载音频到本地
  const res = await uni.downloadFile({ url });
  if (res.statusCode === 200) {
    return res.tempFilePath;
  }
  throw new Error('合成失败');
}

3.2.3 页面集成示例

在pages/tts-demo/index.vue中：

<template>
  <view>
    <input v-model="inputText" placeholder="输入要播报的文字" />
    <button @click="playSpeech">播报</button>
    <audio :src="audioSrc" ref="audioPlayer" />
  </view>
</template>
<script>
import { getAccessToken, synthesizeSpeech } from '@/utils/api';
export default {
  data() {
    return {
      inputText: '',
      audioSrc: '',
      accessToken: ''
    };
  },
  async onLoad() {
    // 从环境变量或配置文件读取（实际开发中需保密）
    const apiKey = 'YOUR_API_KEY';
    const secretKey = 'YOUR_SECRET_KEY';
    this.accessToken = await getAccessToken(apiKey, secretKey);
  },
  methods: {
    async playSpeech() {
      if (!this.inputText) return;
      try {
        const filePath = await synthesizeSpeech(this.accessToken, this.inputText);
        this.audioSrc = filePath;
        this.$nextTick(() => {
          this.$refs.audioPlayer.play();
        });
      } catch (error) {
        uni.showToast({ title: '播报失败', icon: 'none' });
        console.error(error);
      }
    }
  }
};
</script>

四、关键问题与解决方案

4.1 跨平台兼容性

• 小程序限制：微信小程序无法直接播放远程音频，需先下载到本地。
• 解决方案：使用uni.downloadFile下载音频后，通过<audio>组件播放。

4.2 性能优化

• 缓存Access Token：Token有效期为30天，可存储在本地避免频繁请求。
• 预加载音色：对常用音色（如女声）提前合成示例音频，减少用户等待。

4.3 错误处理

• 网络异常：捕获uni.request错误，提示用户检查网络。
• API限流：百度TTS免费版有QPS限制（如5次/秒），需添加重试机制。

五、高级功能扩展

5.1 情感语音合成

通过设置per参数为3或4，启用情感合成音色（度逍遥/度丫丫），适合故事讲述、客服对话等场景。

5.2 多语言支持

修改lan参数为en（英文）或cantonese（粤语），扩展国际用户群体。

5.3 离线方案备选

对于无网络场景，可集成本地TTS引擎（如iOS的AVSpeechSynthesizer或Android的TextToSpeech），通过条件编译实现降级。

六、总结与建议

1. 安全第一：API Key和Secret Key需通过后端服务中转，避免前端硬编码。
2. 用户体验：添加加载动画和错误提示，避免用户因等待而流失。
3. 成本控制：监控API调用量，避免超出免费额度产生费用。

通过以上步骤，开发者可在uni-app中快速实现高质量的文字转语音功能，适用于教育、客服、无障碍等多样化场景。