一、技术选型与平台差异分析

1.1 平台能力对比

微信小程序和H5在语音输入实现上存在显著差异：微信小程序提供wx.getRecorderManager和wx.startRecord等原生API，支持实时录音和语音转文字；H5端则依赖浏览器WebRTC API或第三方SDK，需处理更多兼容性问题。uniapp通过条件编译和插件市场方案，可实现跨平台统一接口。

1.2 核心实现路径

• 微信小程序端：使用原生录音管理器+语音识别API
• H5端：采用WebRTC录音+后端ASR服务或前端离线识别库
• 跨平台方案：通过uni-app插件市场封装或动态加载不同实现

二、微信小程序端实现详解

2.1 录音权限配置

在manifest.json中配置微信小程序权限：

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

2.2 录音管理器使用

// 创建录音管理器
const recorderManager = uni.getRecorderManager()
// 配置录音参数
const options = {
  duration: 60000, // 最大录音时长
  sampleRate: 16000, // 采样率
  numberOfChannels: 1, // 单声道
  encodeBitRate: 96000, // 编码码率
  format: 'mp3' // 音频格式
}
// 录音开始
recorderManager.start(options)
recorderManager.onStart(() => {
  console.log('录音开始')
})
// 录音停止
recorderManager.onStop((res) => {
  console.log('录音文件路径:', res.tempFilePath)
  // 此处可调用微信语音转文字API
})

2.3 语音转文字实现

// 使用微信语音识别API
uni.getFSTemporaryFilePath({
  filePath: tempFilePath,
  success(res) {
    uni.request({
      url: 'https://api.weixin.qq.com/cgi-bin/media/audio/to_text',
      method: 'POST',
      data: {
        voice_id: res.fs_id,
        lang: 'zh_CN'
      },
      success(res) {
        console.log('识别结果:', res.data.result)
      }
    })
  }
})

三、H5端实现方案

3.1 WebRTC录音实现

// 获取媒体设备
async function startRecording() {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
  const mediaRecorder = new MediaRecorder(stream, {
    mimeType: 'audio/wav',
    bitsPerSecond: 128000
  })
  const audioChunks = []
  mediaRecorder.ondataavailable = event => {
    audioChunks.push(event.data)
  }
  mediaRecorder.onstop = async () => {
    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' })
    // 上传至后端ASR服务或使用前端识别库
  }
  mediaRecorder.start()
  setTimeout(() => mediaRecorder.stop(), 5000) // 5秒录音
}

3.2 前端识别方案对比

方案	准确率	延迟	适用场景
Web Speech API	85%	实时	简单指令识别
Vosk离线库	92%	500ms	隐私敏感场景
后端ASR服务	98%	1-2s	高精度需求

四、跨平台封装实践

4.1 条件编译实现

// #ifdef MP-WEIXIN
import { startWxRecord } from './wx-record.js'
// #endif
// #ifdef H5
import { startH5Record } from './h5-record.js'
// #endif
export function startRecord() {
  // #ifdef MP-WEIXIN
  return startWxRecord()
  // #endif
  // #ifdef H5
  return startH5Record()
  // #endif
}

4.2 插件市场方案

推荐使用uni-speech插件（示例）：

import uniSpeech from '@dcloudio/uni-speech'
uniSpeech.record({
  format: 'mp3',
  duration: 60,
  success(tempFilePath) {
    uniSpeech.recognize({
      filePath: tempFilePath,
      success(text) {
        console.log('识别结果:', text)
      }
    })
  }
})

五、常见问题解决方案

5.1 微信小程序录音失败处理

recorderManager.onError((err) => {
  if (err.errMsg.includes('permission')) {
    uni.showModal({
      title: '提示',
      content: '请开启录音权限',
      success(res) {
        if (res.confirm) {
          uni.openSetting()
        }
      }
    })
  }
})

5.2 H5兼容性问题

• iOS Safari限制：必须通过用户交互触发录音（如按钮点击）
• Chrome自动增益控制：通过echoCancellation: false禁用
• Android低版本：检测MediaRecorder支持格式

六、性能优化建议

1. 录音格式选择：

   • 微信小程序：优先使用mp3格式（体积小）
   • H5端：wav格式兼容性最好，opus压缩率最高

2. 采样率设置：

   • 语音识别建议16kHz（人声频段）
   • 音乐类应用需要44.1kHz/48kHz

3. 内存管理：

   • 及时释放录音资源
   • 大文件分片上传

七、完整项目结构示例

/components
  /speech-input
    speech-input.vue  # 封装组件
/utils
  /wx-record.js      # 微信录音实现
  /h5-record.js      # H5录音实现
  /asr-service.js    # 语音识别服务
pages/
  index.vue          # 使用示例

通过以上方案，开发者可以在uniapp中实现跨平台的语音输入功能，根据不同平台特性选择最优实现路径。实际开发中建议先完成单一平台功能，再通过条件编译扩展至多端，同时注意处理各平台的特殊权限要求和API差异。