一、技术背景与需求分析

在移动端应用中，语音识别已成为提升用户体验的核心功能之一。百度语音识别API凭借其高准确率和低延迟特性，成为开发者首选方案。结合UniApp的跨平台优势（iOS/Android/H5），开发者可通过Vue2语法快速构建支持语音输入的混合应用，避免重复开发成本。

二、环境准备与依赖配置

1. 百度AI开放平台注册

• 访问百度AI开放平台，创建应用并获取API Key和Secret Key。
• 启用语音识别服务，选择实时语音识别或录音文件识别接口（根据需求）。

2. UniApp项目初始化

# 创建Vue2项目
vue create -p dcloudio/uni-preset-vue my-uniapp-project
cd my-uniapp-project

3. 插件安装

• 录音权限处理：安装cordova-plugin-media-capture（需通过HBuilderX的插件市场引入原生插件）。
• 网络请求：使用uni.request或axios（需配置）处理API调用。

三、核心实现步骤

1. 获取Access Token

百度API需通过Token验证，需定期刷新：

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

2. 录音与音频数据采集

Android/iOS适配：

• 使用uni.getRecorderManager录制音频，格式设为pcm（百度API要求）。
• 动态申请录音权限：

  // pages/voice/voice.vue
  methods: {
  async startRecording() {
    const status = await this.checkPermission();
    if (status !== 'granted') {
      uni.showToast({ title: '需录音权限', icon: 'none' });
      return;
    }
    this.recorder = uni.getRecorderManager();
    this.recorder.start({
      format: 'pcm',
      sampleRate: 16000, // 百度推荐采样率
      numberOfChannels: 1
    });
  },
  checkPermission() {
    return new Promise(resolve => {
      uni.authorize({
        scope: 'scope.record',
        success: () => resolve('granted'),
        fail: () => resolve('denied')
      });
    });
  }
  }

3. 实时语音识别实现

流程：

1. 录音分块上传（每1-2秒）。
2. 调用百度实时语音识别API。
3. 处理返回的流式结果。

// utils/baiduSpeech.js
export async function recognizeRealTime(token, audioData) {
  const url = `https://vop.baidu.com/server_api?cuid=xxx&token=${token}&speech=${encodeURIComponent(audioData)}&format=pcm&rate=16000`;
  // 实际需使用WebSocket实现流式传输
  // 以下为简化版示例
  const res = await uni.request({
    url: 'https://vop.baidu.com/pro_api',
    method: 'POST',
    header: { 'Content-Type': 'application/json' },
    data: {
      format: 'pcm',
      rate: 16000,
      channel: 1,
      token: token,
      speech: audioData.toString('base64')
    }
  });
  return res.data.result;
}

完整示例：

// pages/voice/voice.vue
data() {
  return {
    accessToken: '',
    tempAudio: []
  };
},
methods: {
  async initSpeech() {
    this.accessToken = await getAccessToken('your_api_key', 'your_secret_key');
    this.startRecording();
    // 模拟分块上传
    setInterval(() => {
      if (this.tempAudio.length > 0) {
        const chunk = this.tempAudio.splice(0, 1024); // 每次发送1KB
        const result = await recognizeRealTime(this.accessToken, chunk);
        this.updateTranscript(result);
      }
    }, 1000);
  },
  updateTranscript(text) {
    this.transcript += text;
  }
}

四、关键问题与解决方案

1. 跨平台兼容性

• H5限制：浏览器需支持WebRTC，建议降级为按钮触发录音。
• iOS静音模式：检测设备静音状态，提示用户调整。

2. 性能优化

• 音频压缩：使用lamejs库将PCM转为MP3，减少传输量。
• 防抖处理：避免频繁调用API。

3. 错误处理

try {
  const result = await recognizeRealTime(...);
} catch (error) {
  if (error.statusCode === 401) {
    // Token过期，重新获取
    this.accessToken = await getAccessToken(...);
  } else {
    uni.showToast({ title: '识别失败', icon: 'none' });
  }
}

五、进阶功能扩展

1. 多语言支持：通过dev_pid参数指定语言模型（如1537对应普通话）。
2. 离线识别：结合百度离线SDK（需原生插件集成）。
3. 语音合成：调用百度TTS API实现交互反馈。

六、部署与测试

1. 真机调试：通过HBuilderX打包到设备，检查麦克风权限。
2. 日志监控：记录API调用成功率与延迟。
3. 灰度发布：先在小范围用户中验证稳定性。

七、总结与建议

• 优先测试：在开发阶段模拟各种网络环境（2G/4G/WiFi）。
• 文档参考：定期查阅百度语音识别官方文档更新接口。
• 替代方案：若遇到配额限制，可考虑阿里云、腾讯云等替代服务。

通过以上步骤，开发者可在UniApp（Vue2）中高效实现百度语音识别功能，兼顾开发效率与用户体验。实际项目中，建议将核心逻辑封装为插件，便于复用与维护。