基于uniapp开发App实现百度语音识别（Vue2版）

2025年10月17日 互联网

一、百度语音识别API简介

百度语音识别服务通过RESTful接口提供实时语音转文字功能，支持多种音频格式（如PCM、WAV、AMR等），开发者可通过HTTP请求将音频数据上传至百度服务器，获取识别结果。其核心优势在于高准确率、低延迟及多场景适配能力，适用于智能客服、语音输入、智能家居等场景。

二、开发环境准备

1. 注册百度智能云账号

访问百度智能云官网，完成实名认证并开通“语音识别”服务，获取API Key和Secret Key。这两个密钥用于后续接口鉴权，需妥善保管。

2. 创建uniapp项目

使用HBuilderX或Vue CLI创建uniapp项目，选择Vue2模板：

  1. # 通过HBuilderX创建
  2. # 或使用CLI
  3. vue create -p dcloudio/uni-preset-vue my-uniapp-project

3. 安装依赖库

安装axios用于HTTP请求，@dcloudio/uni-ui提供UI组件（可选）：

  1. npm install axios @dcloudio/uni-ui --save

三、核心实现步骤

1. 配置百度语音识别参数

在manifest.json中声明录音权限（Android需添加RECORD_AUDIO权限）：

  1. {
  2.   "permission": {
  3.     "scope.userLocation": {
  4.       "desc": "你的位置信息将用于定位"
  5.     },
  6.     "android.permission.RECORD_AUDIO": {
  7.       "desc": "需要录音权限以实现语音识别"
  8.     }
  9.   }
  10. }

2. 封装语音录制功能

使用uniapp的uni.getRecorderManagerAPI录制音频：

  1. // utils/recorder.js
  2. export default {
  3.   startRecording() {
  4.     const recorderManager = uni.getRecorderManager();
  5.     recorderManager.onStart(() => {
  6.       console.log('录音开始');
  7.     });
  8.     recorderManager.onError((err) => {
  9.       console.error('录音错误:', err);
  10.     });
  12.     const options = {
  13.       format: 'pcm', // 百度推荐格式
  14.       sampleRate: 16000, // 采样率
  15.       encodeBitRate: 16000,
  16.       numberOfChannels: 1
  17.     };
  18.     recorderManager.start(options);
  19.     return recorderManager;
  20.   },
  21.   stopRecording(recorderManager) {
  22.     return new Promise((resolve) => {
  23.       recorderManager.onStop((res) => {
  24.         console.log('录音停止，临时文件路径:', res.tempFilePath);
  25.         resolve(res.tempFilePath);
  26.       });
  27.       recorderManager.stop();
  28.     });
  29.   }
  30. };

3. 音频数据转换与上传

百度API要求音频数据为Base64编码或直接上传文件。以下示例将录音文件转为Base64：

  1. // utils/audioHelper.js
  2. export function readAudioAsBase64(filePath) {
  3.   return new Promise((resolve, reject) => {
  4.     plus.io.resolveLocalFileSystemURL(filePath, (entry) => {
  5.       entry.file((file) => {
  6.         const reader = new plus.io.FileReader();
  7.         reader.onloadend = (e) => {
  8.           resolve(e.target.result.split(',')[1]); // 去除data:audio/pcm;base64,前缀
  9.         };
  10.         reader.onerror = reject;
  11.         reader.readAsDataURL(file);
  12.       });
  13.     }, reject);
  14.   });
  15. }

4. 调用百度语音识别API

生成访问令牌（Access Token）并发送识别请求：

  1. // api/baiduSpeech.js
  2. import axios from 'axios';
  4. const API_KEY = '你的API_KEY';
  5. const SECRET_KEY = '你的SECRET_KEY';
  7. // 获取Access Token
  8. export async function getAccessToken() {
  9.   const url = `https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=${API_KEY}&client_secret=${SECRET_KEY}`;
  10.   const res = await axios.get(url);
  11.   return res.data.access_token;
  12. }
  14. // 语音识别
  15. export async function recognizeSpeech(base64Data) {
  16.   const token = await getAccessToken();
  17.   const url = `https://vop.baidu.com/server_api?access_token=${token}`;
  19.   const formData = new FormData();
  20.   formData.append('audio', base64Data);
  21.   formData.append('format', 'pcm');
  22.   formData.append('rate', 16000);
  23.   formData.append('channel', 1);
  24.   formData.append('cuid', 'YOUR_DEVICE_ID'); // 设备唯一标识
  25.   formData.append('len', base64Data.length / 4 * 3); // Base64长度计算
  27.   const config = {
  28.     headers: { 'Content-Type': 'multipart/form-data' }
  29.   };
  31.   const res = await axios.post(url, formData, config);
  32.   return res.data.result[0]; // 返回识别结果
  33. }

5. 完整流程整合

在Vue组件中调用上述方法：

  1. // pages/speech/index.vue
  2. import recorder from '@/utils/recorder';
  3. import { recognizeSpeech } from '@/api/baiduSpeech';
  5. export default {
  6.   data() {
  7.     return {
  8.       resultText: '',
  9.       isRecording: false
  10.     };
  11.   },
  12.   methods: {
  13.     async startRecord() {
  14.       this.isRecording = true;
  15.       this.recorderManager = recorder.startRecording();
  16.     },
  17.     async stopRecord() {
  18.       if (!this.isRecording) return;
  19.       this.isRecording = false;
  20.       const filePath = await recorder.stopRecording(this.recorderManager);
  21.       const base64Data = await this.$audioHelper.readAudioAsBase64(filePath);
  22.       this.resultText = await recognizeSpeech(base64Data);
  23.     }
  24.   }
  25. };

四、常见问题与优化

1. 权限问题

  • Android：需在manifest.json中动态申请录音权限。
  • iOS：在Info.plist中添加NSMicrophoneUsageDescription字段。

2. 音频格式兼容性

百度推荐使用16kHz采样率、单声道的PCM格式。若录音参数不匹配，可能导致识别失败。

3. 网络请求优化

  • 使用axios拦截器统一处理错误。
  • 添加重试机制（如网络波动时自动重试）。

4. 性能优化

  • 录音时禁用屏幕常亮以减少功耗。
  • 对长音频进行分片上传（需百度API支持）。

五、扩展功能建议

  1. 实时语音识别：通过WebSocket实现流式识别，适用于会议记录等场景。
  2. 多语言支持：在API请求中添加dev_pid参数指定语言模型（如中文、英文）。
  3. 离线识别：结合百度离线SDK，减少网络依赖。

六、总结

通过uniapp与Vue2的组合，开发者可以高效实现跨平台语音识别功能。关键步骤包括：录音权限配置、音频数据采集与转换、百度API调用及结果处理。实际开发中需注意格式兼容性、错误处理及性能优化。完整代码示例可参考GitHub开源项目（示例链接）。

最新文章