一、项目背景与需求分析

随着移动端语音交互场景的普及，录音与语音识别功能已成为众多应用的标配。在uniapp中实现这一功能，可同时覆盖iOS、Android及小程序等多平台。百度语音识别API凭借其高准确率和低延迟特性，成为开发者首选的语音处理工具。本方案将通过uniapp的录音插件与百度语音识别API结合，构建一个支持实时录音、语音转文字的简易工具。

1.1 技术选型依据

uniapp跨平台优势：一次开发多端运行，降低开发成本。
百度语音识别API：提供高精度语音转文字服务，支持中英文混合识别。
录音插件兼容性：uniapp官方插件市场提供跨平台录音组件，兼容各端权限管理。

二、环境准备与依赖安装

2.1 百度语音识别API开通

登录百度智能云控制台，创建语音识别应用。
获取APP_ID、API_KEY、SECRET_KEY三个关键参数。
确保账户余额充足（API调用按量计费）。

2.2 uniapp项目配置

使用HBuilderX创建uniapp项目，选择”默认模板”。

安装录音管理插件：

npm install @dcloudio/uni-ui --save
# 或通过HBuilderX插件市场安装"录音管理"插件

配置manifest.json权限：

{
"mp-weixin": {
 "requiredPrivateInfos": ["chooseAudio"]
},
"app-plus": {
 "permissions": ["RECORD"]
}
}

三、核心功能实现

3.1 录音功能开发

使用uni-app的uni.getRecorderManagerAPI实现基础录音：

// pages/recorder/recorder.vue
export default {
  data() {
    return {
      recorderManager: null,
      audioPath: '',
      isRecording: false
    }
  },
  onLoad() {
    this.recorderManager = uni.getRecorderManager();
    this.recorderManager.onStop((res) => {
      this.audioPath = res.tempFilePath;
      this.uploadToBaidu(); // 录音停止后自动触发识别
    });
  },
  methods: {
    startRecord() {
      this.recorderManager.start({
        format: 'mp3',
        duration: 60000 // 最大录音时长60秒
      });
      this.isRecording = true;
    },
    stopRecord() {
      this.recorderManager.stop();
      this.isRecording = false;
    }
  }
}

3.2 百度语音识别集成

3.2.1 获取Access Token

// utils/baidu-auth.js
export async function getAccessToken(apiKey, secretKey) {
  const res = await uni.request({
    url: 'https://aip.baidubce.com/oauth/2.0/token',
    method: 'POST',
    data: {
      grant_type: 'client_credentials',
      client_id: apiKey,
      client_secret: secretKey
    }
  });
  return res.data.access_token;
}

3.2.2 语音识别请求

// utils/baidu-asr.js
export async function recognizeSpeech(token, audioPath) {
  // 1. 将录音文件转为base64
  const fileRes = await uni.getFileSystemManager().readFile({
    filePath: audioPath,
    encoding: 'base64'
  });
  // 2. 构造请求参数
  const params = {
    format: 'mp3',
    rate: 16000, // 采样率需与录音配置一致
    channel: 1,
    token: token,
    cuid: 'UNIAPP_' + Math.random().toString(36).substr(2),
    speech: fileRes.data
  };
  // 3. 发送识别请求
  const res = await uni.request({
    url: 'https://vop.baidu.com/server_api',
    method: 'POST',
    header: {
      'Content-Type': 'application/json'
    },
    data: params
  });
  return res.data.result; // 返回识别结果数组
}

3.3 完整调用流程

// 在recorder.vue中添加
methods: {
  async uploadToBaidu() {
    try {
      const token = await getAccessToken(
        '您的API_KEY', 
        '您的SECRET_KEY'
      );
      const result = await recognizeSpeech(token, this.audioPath);
      uni.showModal({
        title: '识别结果',
        content: result[0],
        showCancel: false
      });
    } catch (e) {
      console.error('识别失败:', e);
      uni.showToast({ title: '识别失败', icon: 'none' });
    }
  }
}

四、关键问题解决方案

4.1 跨平台兼容性处理

iOS录音限制：需在info.plist中添加NSMicrophoneUsageDescription权限描述

Android权限申请：动态申请RECORD_AUDIO权限

// 动态权限申请示例
async checkPermission() {
const res = await uni.authorize({
  scope: 'scope.record'
});
if (!res) {
  uni.showModal({
    content: '需要录音权限',
    success: (res) => {
      if (res.confirm) {
        uni.openSetting();
      }
    }
  });
}
}

4.2 性能优化策略

录音分段处理：对超过60秒的录音进行分段识别
结果缓存：本地存储最近10条识别记录
网络异常处理：设置3次重试机制

五、完整项目结构建议

/project-root
  ├── /pages
  │   └── recorder/       # 录音器页面
  ├── /utils
  │   ├── baidu-auth.js    # 认证相关
  │   └── baidu-asr.js     # 语音识别
  ├── /static
  │   └── icons/           # 界面图标
  └── manifest.json        # 权限配置

六、扩展功能建议

实时语音识别：使用WebSocket实现流式识别
多语言支持：通过lang参数切换识别语言
语音合成：集成百度TTS实现录音回放

七、常见问题排查

403错误：检查Token是否过期，API配额是否充足
录音无声：确认采样率设置为16000Hz
iOS无法录音：检查真机调试权限设置

通过以上步骤，开发者可在uniapp中快速构建一个功能完整的语音录音识别工具。实际开发中建议先在测试环境验证API调用，再逐步完善异常处理和用户体验优化。百度语音识别API的详细参数说明可参考官方文档。

在uniapp中使用百度语音识别技术创建简易录音器