一、技术背景与需求分析

在移动应用开发中，文字转语音（TTS）功能广泛应用于智能客服、语音导航、无障碍阅读等场景。uni-app作为跨平台开发框架，支持多端部署，但原生TTS功能有限。百度PAI短文本转语音API提供高质量的语音合成服务，支持多语言、多音色选择，且响应速度快，适合实时播报需求。

1.1 百度PAI短文本转语音API核心优势

• 高自然度语音：基于深度学习技术，合成语音接近真人发音。
• 多语言支持：覆盖中文、英文及方言，满足国际化需求。
• 灵活参数配置：支持语速、音调、音量等参数调整，提升用户体验。
• 低延迟响应：API调用平均响应时间小于500ms，适合实时场景。

1.2 uni-app集成TTS的挑战

• 跨平台兼容性：需处理不同平台（iOS/Android/H5）的音频播放差异。
• 权限管理：移动端需动态申请麦克风或存储权限（如语音缓存）。
• 网络依赖：API调用依赖网络，需处理弱网或断网情况。

二、环境准备与API配置

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

1. 访问百度智能云官网，注册账号并完成实名认证。
2. 进入控制台 > 人工智能 > 语音技术，开通短文本在线合成服务。
3. 创建应用，获取API Key和Secret Key，用于后续鉴权。

2.2 uni-app项目配置

1. 使用HBuilderX创建uni-app项目，或通过CLI初始化：

   npm init -y
   npm install @dcloudio/uni-app

2. 配置manifest.json，确保支持网络请求和音频播放：

   {
     "networkTimeout": {
       "request": 10000
     },
     "permission": {
       "scope.userLocation": {
         "desc": "你的位置信息将用于语音播报定位"
       }
     }
   }

三、核心代码实现

3.1 封装百度TTS API请求

在utils目录下创建baiduTTS.js，封装鉴权和请求逻辑：

import md5 from 'js-md5'; // 需安装js-md5库
const API_KEY = '你的API_KEY';
const SECRET_KEY = '你的SECRET_KEY';
// 生成Access Token
async function getAccessToken() {
  const authUrl = `https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=${API_KEY}&client_secret=${SECRET_KEY}`;
  const res = await uni.request({ url: authUrl });
  return res.data.access_token;
}
// 调用TTS API
export async function textToSpeech(text, options = {}) {
  const token = await getAccessToken();
  const url = `https://tsn.baidu.com/text2audio?tex=${encodeURIComponent(text)}&tok=${token}&cuid=uni-app&ctp=1&lan=zh&spd=${options.speed || 5}&pit=${options.pitch || 5}&vol=${options.volume || 5}`;
  // 下载音频并播放
  const audioContext = uni.createInnerAudioContext();
  audioContext.src = url;
  audioContext.onPlay(() => console.log('开始播放'));
  audioContext.onError((err) => console.error('播放失败', err));
  audioContext.play();
}

3.2 页面调用示例

在页面中调用textToSpeech方法：

<template>
  <view>
    <input v-model="inputText" placeholder="输入要播报的文字" />
    <button @click="playSpeech">播放</button>
  </view>
</template>
<script>
import { textToSpeech } from '@/utils/baiduTTS.js';
export default {
  data() {
    return {
      inputText: ''
    };
  },
  methods: {
    async playSpeech() {
      if (!this.inputText) {
        uni.showToast({ title: '请输入文字', icon: 'none' });
        return;
      }
      try {
        await textToSpeech(this.inputText, {
          speed: 4, // 语速（0-9）
          pitch: 5, // 音调（0-9）
          volume: 5 // 音量（0-10）
        });
      } catch (e) {
        uni.showToast({ title: '播报失败', icon: 'none' });
      }
    }
  }
};
</script>

四、关键问题与解决方案

4.1 跨平台音频播放差异

• iOS限制：需在info.plist中添加NSAppTransportSecurity配置，允许HTTP请求（百度API支持HTTPS，通常无需修改）。
• Android权限：动态申请INTERNET权限，已在manifest.json中配置。

4.2 错误处理与重试机制

• 网络超时：设置uni.request的timeout为10秒，超时后提示用户重试。
• API限流：百度TTS API有QPS限制（默认5次/秒），需在代码中添加节流逻辑：

  let isRequesting = false;
  export async function textToSpeech(text) {
    if (isRequesting) return;
    isRequesting = true;
    try {
      // ...API调用逻辑
    } finally {
      isRequesting = false;
    }
  }

4.3 性能优化建议

• 预加载音色：首次使用时缓存常用音色，减少重复下载。
• 本地缓存：对频繁播报的文本（如固定提示语）缓存音频文件至本地存储。

五、扩展功能与高级应用

5.1 多语言支持

通过修改lan参数切换语言：

// 英文播报
textToSpeech("Hello, world!", { lan: "en" });

5.2 语音合成事件监听

监听播放状态实现交互控制：

const audioContext = uni.createInnerAudioContext();
audioContext.onEnded(() => {
  console.log('播放完成');
  // 触发下一步操作
});

六、总结与最佳实践

1. 鉴权安全：避免在前端硬编码Secret Key，建议通过后端服务中转请求。
2. 用户体验：提供音量、语速调节UI，适应不同场景需求。
3. 降级方案：网络异常时切换至本地TTS引擎（如iOS的AVSpeechSynthesizer）。

通过以上步骤，开发者可在uni-app中高效集成百度PAI短文本转语音API，实现高质量的实时语音播报功能。完整代码示例可参考GitHub开源项目。