UniApp集成百度语音识别：Vue2下的跨平台实现指南

一、技术背景与需求分析

在移动端应用中，语音识别已成为提升用户体验的核心功能之一。百度语音识别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-2秒）。
调用百度实时语音识别API。
处理返回的流式结果。

// 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' });
  }
}

五、进阶功能扩展

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

六、部署与测试

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

七、总结与建议

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

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