一、语音输入功能需求分析

在社交、教育、客服等场景中，语音输入已成为提升用户体验的关键功能。UniApp作为跨平台开发框架，需要同时适配微信小程序和H5环境，两者在语音处理能力上存在显著差异：

微信小程序：提供完整的wx.getRecorderManager和wx.startRecordAPI
H5端：依赖浏览器WebRTC API或第三方语音识别服务
共同挑战：权限管理、实时性处理、跨平台兼容

典型应用场景包括：

语音转文字即时通讯
语音搜索与指令控制
语音笔记与备忘录
智能客服语音交互

二、微信小程序端实现方案

1. 录音权限配置

在manifest.json中添加小程序配置：

{
  "mp-weixin": {
    "appid": "your-appid",
    "requiredPrivateInfos": ["getRecorderManager", "chooseMessageFile"]
  }
}

2. 核心录音实现

// 录音管理器实例
const recorderManager = uni.getRecorderManager()
// 录音配置
const recordOptions = {
  format: 'mp3',
  sampleRate: 16000,
  numberOfChannels: 1,
  encodeBitRate: 192000,
  frameSize: 50
}
// 开始录音
function startRecord() {
  uni.authorize({
    scope: 'scope.record',
    success() {
      recorderManager.start(recordOptions)
      recorderManager.onStart(() => {
        console.log('录音开始')
      })
      recorderManager.onError((err) => {
        console.error('录音错误', err)
      })
    },
    fail() {
      uni.showModal({
        title: '提示',
        content: '需要录音权限',
        showCancel: false
      })
    }
  })
}
// 停止录音
function stopRecord() {
  recorderManager.stop()
  recorderManager.onStop((res) => {
    const tempFilePath = res.tempFilePath
    // 处理录音文件
    uploadAudio(tempFilePath)
  })
}

3. 语音识别实现

微信小程序提供wx.getFSManager和第三方语音识别SDK集成方案：

// 使用腾讯云语音识别（示例）
async function recognizeAudio(filePath) {
  const res = await uni.uploadFile({
    url: 'https://recognition.tencentcloudapi.com',
    filePath: filePath,
    name: 'file',
    formData: {
      engine_type: '16k_zh',
      channel_num: 1
    }
  })
  return JSON.parse(res.data).result
}

三、H5端实现方案

1. WebRTC录音实现

// 检查浏览器支持
function checkBrowserSupport() {
  return !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
}
// 获取音频流
async function startH5Record() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
    const mediaRecorder = new MediaRecorder(stream, {
      mimeType: 'audio/wav',
      audioBitsPerSecond: 128000
    })
    let audioChunks = []
    mediaRecorder.ondataavailable = event => {
      audioChunks.push(event.data)
    }
    mediaRecorder.onstop = async () => {
      const audioBlob = new Blob(audioChunks, { type: 'audio/wav' })
      const audioUrl = URL.createObjectURL(audioBlob)
      // 上传处理
      uploadH5Audio(audioBlob)
    }
    mediaRecorder.start()
    return {
      stop: () => mediaRecorder.stop(),
      stream
    }
  } catch (err) {
    console.error('H5录音错误', err)
  }
}

2. 第三方服务集成

推荐使用以下H5语音识别方案：

科大讯飞WebAPI：提供高精度语音识别

async function xfRecognize(audioBlob) {
const formData = new FormData()
formData.append('audio', audioBlob)
const response = await fetch('https://api.xfyun.cn/v1/service/v1/iat', {
 method: 'POST',
 headers: {
   'X-Appid': 'your-appid',
   'X-CurTime': Math.floor(Date.now()/1000),
   'X-Param': JSON.stringify({engine_type: 'sms16k'})
 },
 body: formData
})
return response.json()
}

百度语音识别：支持长语音识别
阿里云智能语音交互：提供实时语音识别

四、跨平台兼容处理

1. 条件编译方案

// #ifdef MP-WEIXIN
function platformRecord() {
  return wxRecord()
}
// #endif
// #ifdef H5
function platformRecord() {
  return h5Record()
}
// #endif

2. 统一接口设计

class VoiceRecorder {
  constructor() {
    this.recorder = null
    this.isRecording = false
  }
  async start() {
    if (uni.getSystemInfoSync().platform === 'mp-weixin') {
      this.recorder = await this.initWxRecorder()
    } else {
      this.recorder = await this.initH5Recorder()
    }
    this.isRecording = true
  }
  stop() {
    if (this.recorder) {
      this.recorder.stop()
      this.isRecording = false
    }
  }
}

五、性能优化策略

录音参数调优：
- 采样率：移动端推荐16kHz
- 码率：语音通信64-128kbps足够
- 帧大小：20-100ms平衡延迟和包大小
内存管理：
- 及时释放MediaStream对象
- 避免长时间持有音频Blob
- 使用Web Worker处理音频数据
网络优化：
- 录音分段上传（建议每30秒）
- 实现断点续传机制
- 压缩音频数据（如Opus编码）

六、常见问题解决方案

微信小程序录音失败：
- 检查requiredPrivateInfos配置
- 确保用户已授权录音权限
- 处理录音管理器事件监听
H5端浏览器兼容问题：
- 检测MediaRecorder支持情况
- 提供降级方案（如上传后识别）
- 处理不同浏览器的音频格式差异
语音识别准确率问题：
- 添加静音检测和端点检测
- 实现语音活动检测(VAD)
- 提供手动修正功能

七、完整项目结构建议

/plugins/voice/
  ├── recorder.js        # 录音核心逻辑
  ├── recognizer.js      # 语音识别逻辑
  ├── wx-adapter.js      # 微信小程序适配
  ├── h5-adapter.js       # H5适配
  └── index.js           # 统一出口

八、测试与调试技巧

微信小程序调试：
- 使用开发者工具的录音模拟
- 检查控制台权限错误
- 测试不同采样率的效果
H5端调试：
- 使用Chrome的AudioContext可视化
- 测试不同浏览器的兼容性
- 检查网络请求的音频数据
跨平台测试：
- 创建测试用例覆盖各平台
- 使用条件编译确保代码覆盖
- 自动化测试录音流程

通过以上方案，开发者可以在UniApp中实现稳定的跨平台语音输入功能，兼顾微信小程序和H5端的用户体验。实际开发中应根据具体业务需求选择合适的语音识别服务，并做好性能监控和错误处理。

UniApp跨平台语音输入实战：微信小程序与H5全场景适配指南