一、技术背景与选型依据

1.1 语音识别技术价值

语音交互已成为移动应用的核心功能之一，尤其在智能家居、车载系统、无障碍服务等场景中，语音识别能显著提升用户体验。百度语音识别API提供高精度、低延迟的语音转文字服务，支持中英文混合识别及实时反馈，适合需要快速集成语音功能的uniapp项目。

1.2 uniapp跨平台优势

uniapp基于Vue2框架，通过一套代码可编译至iOS、Android、H5及小程序多端。相较于原生开发，uniapp能大幅降低开发成本，尤其适合需要快速迭代的中小型项目。结合百度语音识别API，开发者无需处理各平台原生语音模块的差异，即可实现跨平台语音功能。

1.3 百度语音识别API特点

百度语音识别提供两种调用方式：

• WebSocket实时流式识别：适合长语音、实时反馈场景（如语音输入）。
• REST API短语音识别：适合短语音、一次性识别场景（如语音搜索）。

本文以REST API为例，因其实现简单且能覆盖大多数uniapp应用场景。

二、开发环境准备

2.1 百度AI开放平台注册

1. 访问百度AI开放平台，注册账号并完成实名认证。
2. 创建“语音识别”应用，获取API Key和Secret Key。
3. 开启“短语音识别”和“实时语音识别”权限（根据需求选择）。

2.2 uniapp项目配置

1. 使用HBuilderX创建uniapp项目，选择Vue2模板。
2. 安装必要插件：

   npm install js-base64 axios --save

   • js-base64：用于Base64编码音频数据。
   • axios：发起HTTP请求。

2.3 权限声明

在manifest.json中添加录音权限：

{
  "mp-weixin": {
    "requiredPrivateInfos": ["getRecorderManager"]
  },
  "app-plus": {
    "permissions": ["record"]
  }
}

三、核心功能实现

3.1 录音模块封装

使用uniapp的uni.getRecorderManager实现跨平台录音：

// utils/recorder.js
const recorderManager = uni.getRecorderManager();
let isRecording = false;
export function startRecording() {
  return new Promise((resolve, reject) => {
    recorderManager.onStart(() => {
      isRecording = true;
      console.log('录音开始');
    });
    recorderManager.onStop((res) => {
      isRecording = false;
      if (res.tempFilePath) {
        resolve(res.tempFilePath);
      } else {
        reject('录音失败');
      }
    });
    recorderManager.start({
      format: 'wav', // 百度API支持wav/pcm
      sampleRate: 16000, // 推荐16k采样率
      numberOfChannels: 1
    });
  });
}
export function stopRecording() {
  if (isRecording) {
    recorderManager.stop();
  }
}

3.2 百度API鉴权

生成访问令牌（Access Token）：

// utils/baiduAuth.js
import axios from 'axios';
import { Base64 } from 'js-base64';
export async function getAccessToken(apiKey, secretKey) {
  const auth = `${apiKey}:${secretKey}`;
  const encodedAuth = Base64.encode(auth);
  try {
    const response = await axios.post(
      'https://aip.baidubce.com/oauth/2.0/token',
      `grant_type=client_credentials&client_id=${apiKey}&client_secret=${secretKey}`
    );
    return response.data.access_token;
  } catch (error) {
    console.error('获取Token失败:', error);
    throw error;
  }
}

3.3 语音识别核心逻辑

将录音文件上传至百度API并获取识别结果：

// utils/baiduASR.js
import axios from 'axios';
import { getAccessToken } from './baiduAuth';
export async function recognizeSpeech(filePath, apiKey, secretKey) {
  const token = await getAccessToken(apiKey, secretKey);
  const formData = new FormData();
  // 读取文件并转为Base64（实际开发中建议直接上传文件）
  const fileData = await uni.getFileSystemManager().readFile({
    filePath: filePath,
    encoding: 'base64'
  });
  formData.append('speech', fileData);
  formData.append('format', 'wav');
  formData.append('rate', 16000);
  formData.append('channel', 1);
  formData.append('token', token);
  formData.append('cuid', 'uniapp-' + Math.random().toString(36).substr(2));
  try {
    const response = await axios.post(
      'https://vop.baidu.com/server_api',
      formData,
      {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
    );
    return response.data.result[0]; // 返回识别文本
  } catch (error) {
    console.error('识别失败:', error.response?.data || error);
    throw error;
  }
}

3.4 完整交互流程

在Vue组件中整合录音与识别：

// pages/asr/index.vue
<template>
  <view class="container">
    <button @click="startRecord">开始录音</button>
    <button @click="stopRecord" :disabled="!isRecording">停止录音</button>
    <view v-if="result" class="result">{{ result }}</view>
  </view>
</template>
<script>
import { startRecording, stopRecording } from '@/utils/recorder';
import { recognizeSpeech } from '@/utils/baiduASR';
export default {
  data() {
    return {
      isRecording: false,
      result: ''
    };
  },
  methods: {
    async startRecord() {
      try {
        await startRecording();
        this.isRecording = true;
      } catch (error) {
        uni.showToast({ title: '录音启动失败', icon: 'none' });
      }
    },
    async stopRecord() {
      try {
        const filePath = await stopRecording();
        const text = await recognizeSpeech(
          filePath,
          '你的API_KEY',
          '你的SECRET_KEY'
        );
        this.result = text;
      } catch (error) {
        uni.showToast({ title: '识别失败', icon: 'none' });
      } finally {
        this.isRecording = false;
      }
    }
  }
};
</script>

四、优化与注意事项

4.1 性能优化

• 音频格式：优先使用WAV格式，避免MP3等压缩格式导致的识别率下降。
• 采样率匹配：确保录音采样率与API要求的16kHz一致。
• 网络请求：使用axios的timeout配置避免长时间等待。

4.2 错误处理

• 权限拒绝：监听uni.onPermissionRequest处理用户拒绝录音权限的情况。
• API限流：百度API有QPS限制，需在代码中实现重试机制。

4.3 跨平台兼容性

• iOS录音：需在manifest.json中配置UIBackgroundModes为audio。
• Android权限：动态申请RECORD_AUDIO权限。

五、扩展功能建议

1. 实时语音识别：通过WebSocket实现边录音边识别，适合聊天机器人等场景。
2. 语音指令控制：结合语义理解API实现设备控制（如“打开灯光”）。
3. 离线识别：对于弱网环境，可集成本地语音识别引擎（如TensorFlow Lite）。

六、总结

通过uniapp（Vue2）集成百度语音识别API，开发者能够以较低成本实现跨平台语音交互功能。关键步骤包括录音模块封装、API鉴权、语音数据上传及结果处理。实际开发中需注意音频格式、权限管理及错误处理，以确保功能稳定性和用户体验。