在uni-app中集成百度PAI TTS实现实时文字播报

一、技术背景与需求分析

随着智能交互场景的普及，文字转语音（TTS）技术已成为提升用户体验的关键工具。百度PAI（Platform of Artificial Intelligence）提供的短文本转语音API，凭借其高自然度、低延迟的特性，成为开发者实现实时语音播报的优选方案。在uni-app跨平台框架中集成该功能，可覆盖微信小程序、H5、App等多端场景，满足教育、客服、导航等领域的语音播报需求。

核心优势

1. 多平台支持：uni-app的编译能力可让TTS功能无缝适配iOS、Android及Web端。
2. 低延迟响应：百度PAI TTS API的响应时间通常在500ms以内，适合实时性要求高的场景。
3. 语音参数定制：支持语速、音调、音量及发音人选择，提升语音交互的自然度。

二、环境准备与API配置

1. 百度PAI账号与API开通

• 步骤：登录百度智能云控制台 → 进入「PAI-DGW平台」→ 创建TTS应用 → 获取API Key和Secret Key。
• 注意事项：
  • 确保账号已实名认证，避免调用限额问题。
  • 在「语音合成」服务中启用「短文本在线合成」权限。

2. uni-app项目初始化

• 使用HBuilderX创建uni-app项目，选择「默认模板」或「Hello uni-app」示例。
• 配置manifest.json文件，确保网络请求权限已开启（如小程序需配置request合法域名）。

3. 依赖安装与工具准备

• HTTP请求库：推荐使用axios或uni.request（内置）。
• 加密库：若需生成签名，可引入crypto-js（H5端）或使用小程序原生加密API。
• 音频播放：通过uni.createInnerAudioContext()实现跨平台音频控制。

三、核心实现步骤

1. 生成访问令牌（Access Token）

百度PAI TTS API需通过OAuth2.0认证，需定期刷新Access Token。

// utils/auth.js
const getAccessToken = async (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; // 返回24小时有效的令牌
};

2. 构建TTS请求参数

// utils/tts.js
const synthesizeSpeech = async (text, accessToken, options = {}) => {
  const url = `https://tsn.baidu.com/text2audio?tex=${encodeURIComponent(text)}&lan=zh&cuid=YOUR_DEVICE_ID&ctp=1&tok=${accessToken}`;
  // 可选参数：语速（-500~500）、音调（-500~500）、发音人（0~6）
  if (options.spd) url += `&spd=${options.spd}`;
  if (options.pit) url += `&pit=${options.pit}`;
  if (options.per) url += `&per=${options.per}`; // 0:女声 1:男声 3:情感合成-度逍遥...
  const res = await uni.request({
    url,
    method: 'GET',
    responseType: 'arraybuffer' // 关键：接收二进制音频流
  });
  return res.data; // 返回ArrayBuffer格式的音频数据
};

3. 音频播放与错误处理

// pages/index/index.vue
export default {
  data() {
    return {
      audioCtx: null,
      currentText: '欢迎使用百度TTS服务'
    };
  },
  onLoad() {
    this.audioCtx = uni.createInnerAudioContext();
    this.audioCtx.onError((e) => {
      console.error('音频播放错误:', e);
      uni.showToast({ title: '播放失败', icon: 'none' });
    });
  },
  methods: {
    async playSpeech() {
      try {
        const accessToken = await getAccessToken('YOUR_API_KEY', 'YOUR_SECRET_KEY');
        const audioData = await synthesizeSpeech(this.currentText, accessToken, {
          spd: 0, // 默认语速
          per: 1  // 默认男声
        });
        // 将ArrayBuffer转为Base64（部分平台需此格式）
        const base64 = uni.arrayBufferToBase64(audioData);
        this.audioCtx.src = `data:audio/mp3;base64,${base64}`;
        this.audioCtx.play();
      } catch (error) {
        console.error('TTS合成失败:', error);
        uni.showToast({ title: '合成失败', icon: 'none' });
      }
    }
  }
};

四、性能优化与最佳实践

1. 令牌缓存策略

• 使用uni.setStorageSync缓存Access Token，避免频繁请求。
• 设置定时器在过期前5分钟刷新令牌。

2. 音频预加载

• 对高频使用的文本（如导航指令）提前合成并缓存音频。
• 使用IndexedDB（H5端）或小程序本地缓存存储音频文件。

3. 多端兼容性处理

• 小程序端：需在微信公众平台配置downloadFile合法域名（百度API域名需加入白名单）。
• App端：启用允许http请求（开发阶段）或配置HTTPS证书。
• H5端：处理跨域问题，可通过Nginx反向代理或后端服务中转。

4. 错误重试机制

• 网络超时（如408错误）时自动重试2次。
• 语音合成失败（如400错误）时提示用户简化文本后重试。

五、安全与合规建议

1. 敏感信息保护：勿将API Key和Secret Key硬编码在客户端代码中，建议通过后端服务中转请求。
2. 内容过滤：对用户输入的文本进行敏感词检测，避免违规内容合成。
3. 隐私政策：在App或小程序中明确告知用户语音数据的使用范围。

六、扩展应用场景

1. 无障碍阅读：为视障用户提供网页内容语音播报。
2. 智能客服：实时播报订单状态或操作指引。
3. 教育领域：将教材文本转为语音，支持多语种学习。

通过以上步骤，开发者可在uni-app中高效集成百度PAI TTS服务，实现跨平台的实时语音播报功能。实际开发中需结合具体场景调整参数，并持续关注百度API的更新日志以优化体验。