一、技术背景与需求分析

在移动端开发中，语音识别功能已成为提升用户体验的重要手段。uniapp作为跨平台开发框架，结合Vue2的语法特性，能够高效实现这一需求。百度语音识别API提供稳定的云端服务，支持实时语音转文字，适用于搜索、输入、指令控制等场景。

核心优势

跨平台兼容性：uniapp编译后支持iOS/Android双端，代码复用率高
开发效率：Vue2的响应式数据绑定简化状态管理
服务稳定性：百度语音识别API提供99.9%可用性保障

二、开发环境准备

1. 百度AI开放平台配置

登录百度AI开放平台
创建语音识别应用，获取API Key和Secret Key
开启语音识别和语音合成权限（如需双向功能）

2. uniapp项目初始化

# 使用HBuilderX创建uniapp项目
# 或通过CLI初始化
vue create -p dcloudio/uni-preset-vue my-voice-app

3. 插件市场依赖

在manifest.json中配置录音权限：

{
  "permission": {
    "scope.userLocation": {
      "desc": "需要定位权限以优化语音识别"
    },
    "scope.record": {
      "desc": "需要录音权限实现语音识别"
    }
  }
}

三、核心实现步骤

1. 封装百度语音API

创建utils/baiduVoice.js：

import md5 from 'js-md5'
export default class BaiduVoice {
  constructor(apiKey, secretKey) {
    this.apiKey = apiKey
    this.secretKey = secretKey
  }
  // 获取Access Token
  async getAccessToken() {
    const timestamp = Date.now()
    const sign = md5(`${this.apiKey}${timestamp}${this.secretKey}`)
    const res = await uni.request({
      url: 'https://aip.baidubce.com/oauth/2.0/token',
      data: {
        grant_type: 'client_credentials',
        client_id: this.apiKey,
        client_secret: this.secretKey
      }
    })
    return res.data.access_token
  }
  // 语音识别主方法
  async recognize(audioData, format = 'wav', rate = 16000) {
    const token = await this.getAccessToken()
    const res = await uni.uploadFile({
      url: `https://vop.baidu.com/server_api?token=${token}`,
      filePath: audioData,
      name: 'audio',
      formData: {
        cuid: 'uniapp-demo',
        format: format,
        rate: rate,
        channel: 1,
        len: audioData.length
      }
    })
    return JSON.parse(res[1].data)
  }
}

2. 录音组件实现

创建components/VoiceRecorder.vue：

<template>
  <view class="recorder-container">
    <button @click="startRecord" :disabled="isRecording">
      {{ isRecording ? '录音中...' : '开始录音' }}
    </button>
    <button @click="stopRecord" :disabled="!isRecording">停止录音</button>
    <text v-if="result">{{ result }}</text>
  </view>
</template>
<script>
import BaiduVoice from '@/utils/baiduVoice'
export default {
  data() {
    return {
      isRecording: false,
      recorderManager: null,
      tempFilePath: '',
      result: '',
      voiceInstance: new BaiduVoice('YOUR_API_KEY', 'YOUR_SECRET_KEY')
    }
  },
  mounted() {
    this.recorderManager = uni.getRecorderManager()
    this.recorderManager.onStart(() => {
      this.isRecording = true
    })
    this.recorderManager.onStop((res) => {
      this.tempFilePath = res.tempFilePath
      this.isRecording = false
      this.recognizeVoice()
    })
  },
  methods: {
    startRecord() {
      this.recorderManager.start({
        format: 'wav',
        sampleRate: 16000,
        numberOfChannels: 1
      })
    },
    stopRecord() {
      this.recorderManager.stop()
    },
    async recognizeVoice() {
      try {
        const res = await this.voiceInstance.recognize(this.tempFilePath)
        if (res.result) {
          this.result = res.result[0]
          this.$emit('recognition-complete', this.result)
        }
      } catch (error) {
        console.error('识别失败:', error)
      }
    }
  }
}
</script>

3. 页面集成示例

在pages/index/index.vue中使用组件：

<template>
  <view class="content">
    <voice-recorder @recognition-complete="handleResult" />
    <view v-if="history.length" class="history">
      <text v-for="(item, index) in history" :key="index">
        {{ index + 1 }}. {{ item }}
      </text>
    </view>
  </view>
</template>
<script>
import VoiceRecorder from '@/components/VoiceRecorder'
export default {
  components: { VoiceRecorder },
  data() {
    return {
      history: []
    }
  },
  methods: {
    handleResult(text) {
      this.history.push(text)
      uni.showToast({
        title: '识别成功',
        icon: 'success'
      })
    }
  }
}
</script>

四、关键问题解决方案

1. 录音权限处理

// 在App.vue中全局检测权限
onLaunch() {
  uni.authorize({
    scope: 'scope.record',
    success() {
      console.log('录音权限已授权')
    },
    fail() {
      uni.showModal({
        title: '需要录音权限',
        content: '请前往设置开启录音权限',
        success(res) {
          if (res.confirm) {
            uni.openSetting()
          }
        }
      })
    }
  })
}

2. 音频格式优化

参数	推荐值	说明
采样率	16000Hz	百度API最佳兼容采样率
声道数	单声道	减少数据量提升识别速度
编码格式	PCM/WAV	避免MP3等有损压缩格式

3. 网络请求优化

// 在utils/request.js中封装带重试的请求
export async function baiduRequest(options, maxRetry = 3) {
  let retry = 0
  while (retry < maxRetry) {
    try {
      const res = await uni.request(options)
      if (res.statusCode === 200) return res.data
      throw new Error(res.data.error_msg || '请求失败')
    } catch (error) {
      retry++
      if (retry === maxRetry) throw error
      await new Promise(resolve => setTimeout(resolve, 1000 * retry))
    }
  }
}

五、性能优化建议

本地缓存Token：使用uni.setStorageSync缓存access_token（有效期30天）
音频预处理：对长录音进行分段处理（建议单次录音≤60秒）
错误重试机制：网络波动时自动重试3次
结果校验：验证返回数据中的error_code字段

六、安全注意事项

严禁在前端代码中硬编码Secret Key，建议通过后端接口获取
敏感操作添加二次确认弹窗
用户数据传输使用HTTPS协议

七、扩展功能建议

语音指令控制：结合正则表达式实现特定指令识别
多语言支持：通过lan参数切换识别语言（中文/英文/粤语等）
实时语音转写：使用WebSocket实现流式识别

通过以上实现方案，开发者可以在uniapp项目中快速构建稳定的语音识别功能。实际开发中需根据具体业务场景调整参数配置，并做好异常处理和用户体验优化。

uniapp集成百度语音识别：Vue2开发实战指南