在uni-app中集成百度PAI短文本转语音TTS的完整指南

一、背景与需求分析

在跨平台开发场景中，uni-app因其“一次编写，多端运行”的特性被广泛应用于移动端、小程序及Web应用开发。文字转语音（TTS）功能作为无障碍访问、智能客服、语音导航等场景的核心技术，对提升用户体验至关重要。百度PAI短文本转语音API凭借其高自然度、多语言支持及低延迟特性，成为开发者实现TTS功能的优选方案。本文将系统阐述如何在uni-app中调用该API，实现实时文字转语音播报。

二、环境准备与前提条件

1. 百度智能云账号注册与API开通

• 注册账号：访问百度智能云官网，完成实名认证。
• 创建应用：在“语音技术”-“短文本在线合成”中创建应用，获取APP_ID、API_KEY和SECRET_KEY。
• 开通服务：确保已开通“短文本在线合成”服务，并获取免费额度或购买资源包。

2. uni-app项目配置

• HBuilderX开发环境：安装最新版HBuilderX，创建uni-app项目（选择Vue2或Vue3模板）。
• 网络请求权限：在manifest.json中配置网络权限（Android需<uses-permission android:name="android.permission.INTERNET"/>）。
• 跨域处理：若调用HTTP API，需配置服务器代理或使用HTTPS协议避免跨域问题。

三、百度PAI TTS API调用流程

1. API请求原理

百度PAI短文本转语音API通过RESTful接口接收文本内容，返回音频流或下载链接。核心步骤包括：

• 获取Access Token：通过API Key和Secret Key换取临时授权令牌。
• 构造请求参数：包括文本内容、语音类型、语速、音量等。
• 发送HTTP请求：将参数POST至API端点，获取音频数据。
• 播放音频：将返回的音频流通过Web Audio API或<audio>标签播放。

2. 关键参数说明

参数名	类型	必填	说明
tex	String	是	待合成的文本（UTF-8编码）
lan	String	否	语言类型（zh/en等）
ctp	String	否	客户端类型（1=网页）
aue	String	否	音频编码（raw/mp3等）
cuid	String	否	用户唯一标识

四、uni-app代码实现

1. 获取Access Token

// utils/baiduTTS.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;
};

2. 调用TTS API合成音频

const synthesizeSpeech = async (text, token, appId) => {
  const url = `https://tsn.baidu.com/text2audio?tex=${encodeURIComponent(text)}&lan=zh&cuid=${appId}&ctp=1&tok=${token}`;
  const res = await uni.request({
    url,
    method: 'GET',
    responseType: 'arraybuffer' // 关键：接收二进制数据
  });
  return res.data; // 返回ArrayBuffer音频数据
};

3. 播放音频

const playAudio = (audioData) => {
  const innerAudioContext = uni.createInnerAudioContext();
  const blob = new Blob([audioData], { type: 'audio/mp3' });
  const url = URL.createObjectURL(blob);
  innerAudioContext.src = url;
  innerAudioContext.play();
};

4. 完整调用示例

// 在页面中调用
export default {
  data() {
    return {
      apiKey: 'YOUR_API_KEY',
      secretKey: 'YOUR_SECRET_KEY',
      appId: 'YOUR_APP_ID'
    };
  },
  methods: {
    async speak(text) {
      try {
        const token = await getAccessToken(this.apiKey, this.secretKey);
        const audioData = await synthesizeSpeech(text, token, this.appId);
        playAudio(audioData);
      } catch (err) {
        console.error('TTS Error:', err);
      }
    }
  }
};

五、优化与注意事项

1. 性能优化

• 缓存Access Token：Token有效期为30天，可缓存避免频繁请求。
• 分片处理长文本：百度API对单次请求文本长度有限制（如512字符），需拆分长文本。
• 预加载语音：对固定文本（如按钮提示音）可提前合成并缓存音频。

2. 错误处理

• 网络异常：捕获uni.request错误，提示用户检查网络。
• API限额：监控每日调用次数，避免超出免费额度。
• 文本合法性：过滤敏感词或特殊符号，防止API拒绝请求。

3. 跨平台兼容性

• 小程序限制：部分小程序平台（如微信）需配置域名白名单，且不支持Blob对象，需改用base64或临时文件路径。
• H5适配：在浏览器中需处理CORS问题，建议通过后端代理转发请求。

六、扩展应用场景

1. 无障碍阅读：为视障用户提供网页内容语音播报。
2. 智能客服：实时播报客服回复，提升交互体验。
3. 教育应用：语音朗读单词、句子，辅助语言学习。
4. 物联网设备：通过语音播报设备状态或提醒信息。

七、总结与建议

通过百度PAI短文本转语音API，uni-app开发者可快速实现高质量的文字转语音功能。关键步骤包括：

1. 注册百度智能云并获取API密钥。
2. 在uni-app中封装Token获取与音频合成逻辑。
3. 处理音频数据并适配不同平台。
4. 优化性能与错误处理机制。

建议：首次集成时，先在H5环境测试API调用流程，再逐步适配小程序和App端。同时，关注百度智能云的API更新日志，及时调整参数配置。