一、语音输入功能的技术选型分析

1.1 原生API支持对比

微信小程序提供wx.getRecorderManager()和wx.startRecord()两种录音接口，前者支持更精细的控制（如采样率、声道数设置），后者为简化版API。H5端则依赖浏览器原生MediaRecorderAPI或WebRTC的getUserMedia，但存在浏览器兼容性问题（如Safari对部分编解码格式的支持缺失）。

1.2 第三方SDK集成方案

针对H5端兼容性痛点，推荐集成腾讯云语音识别SDK或科大讯飞WebAPI。以腾讯云为例，其提供完整的语音转文字服务链，支持实时流式识别与离线文件识别两种模式，且H5端可通过WebSocket协议实现低延迟传输。

1.3 跨平台封装策略

采用UniApp的条件编译特性，在manifest.json中配置平台差异：

{
  "mp-weixin": {
    "usingComponents": true,
    "appid": "wx..."
  },
  "h5": {
    "title": "语音输入",
    "sdkConfigs": {
      "TencentCloud": {
        "secretId": "...",
        "secretKey": "..."
      }
    }
  }
}

通过#ifdef MP-WEIXIN和#ifdef H5预编译指令实现代码分叉。

二、微信小程序端实现细节

2.1 录音权限管理

在app.json中声明录音权限：

{
  "permission": {
    "scope.record": {
      "desc": "需要您的录音权限以实现语音输入"
    }
  }
}

动态检测权限状态：

wx.getSetting({
  success(res) {
    if (!res.authSetting['scope.record']) {
      wx.authorize({
        scope: 'scope.record',
        success() { startRecording() }
      })
    }
  }
})

2.2 录音控制器实现

const recorderManager = wx.getRecorderManager()
const options = {
  duration: 60000, // 最大录音时长
  sampleRate: 16000, // 采样率
  numberOfChannels: 1, // 单声道
  encodeBitRate: 192000, // 编码码率
  format: 'mp3' // 格式
}
recorderManager.onStart(() => console.log('录音开始'))
recorderManager.onStop((res) => {
  const tempFilePath = res.tempFilePath
  // 上传至服务器或本地处理
})
function startRecording() {
  recorderManager.start(options)
}
function stopRecording() {
  recorderManager.stop()
}

2.3 语音转文字服务对接

使用微信原生语音识别（需企业资质）或第三方API：

wx.uploadFile({
  url: 'https://api.example.com/asr',
  filePath: tempFilePath,
  name: 'file',
  formData: {
    engine: '16k_zh' // 16k采样率中文引擎
  },
  success(res) {
    const data = JSON.parse(res.data)
    this.text = data.result
  }
})

三、H5端实现方案

3.1 浏览器录音实现

async function startH5Record() {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
  const mediaRecorder = new MediaRecorder(stream, {
    mimeType: 'audio/wav',
    bitsPerSecond: 128000
  })
  const chunks = []
  mediaRecorder.ondataavailable = e => chunks.push(e.data)
  mediaRecorder.onstop = () => {
    const blob = new Blob(chunks, { type: 'audio/wav' })
    // 处理blob数据
  }
  mediaRecorder.start()
  return { stop: () => mediaRecorder.stop() }
}

3.2 腾讯云SDK集成示例

import TcVcs from 'tencentcloud-chat-sdk'
const client = new TcVcs({
  SDKAppID: 1400000000,
  secretKey: '...'
})
async function recognizeSpeech(audioData) {
  const res = await client.sendVoice({
    Version: '2021-12-30',
    ProjectId: 0,
    SubProjectId: 0,
    EngineType: '16k_zh',
    VoiceFormat: 'wav',
    Data: audioData.toString('base64')
  })
  return res.Result
}

3.3 跨平台兼容层设计

创建adapter.js统一接口：

const platformAdapter = {
  startRecord: () => {
    #ifdef MP-WEIXIN
    return startWeixinRecord()
    #endif
    #ifdef H5
    return startH5Record()
    #endif
  },
  stopRecord: (callback) => {
    // 类似实现
  },
  recognize: (audioData) => {
    // 根据平台调用不同识别服务
  }
}

四、性能优化与异常处理

4.1 录音质量调优

• 采样率选择：移动端推荐16kHz（平衡质量与带宽）
• 码率控制：语音识别场景128kbps足够
• 格式选择：微信小程序优先mp3，H5端wav兼容性最佳

4.2 内存管理策略

• 微信小程序：及时释放RecorderManager实例
• H5端：及时关闭MediaStreamTrack

  // H5端资源释放示例
  function cleanup(stream) {
  stream.getTracks().forEach(track => track.stop())
  }

4.3 错误处理机制

recorderManager.onError((err) => {
  console.error('录音错误:', err.errMsg)
  if (err.errMsg.includes('permission')) {
    uni.showToast({ title: '请授予录音权限', icon: 'none' })
  }
})

五、完整项目实践建议

5.1 开发流程规范

1. 先实现微信小程序版，验证核心功能
2. 通过条件编译逐步添加H5支持
3. 使用真机调试（特别是iOS Safari的录音限制）

5.2 测试用例设计

• 录音中断测试（来电、切换应用）
• 网络异常测试（弱网环境下的上传重试）
• 格式兼容性测试（不同设备生成的音频文件）

5.3 部署监控指标

• 录音成功率（分平台统计）
• 语音识别准确率
• 端到端延迟（从录音到显示文字）

六、进阶功能扩展

6.1 实时语音转写

通过WebSocket实现流式识别：

// 微信小程序WebSocket示例
const socketTask = wx.connectSocket({
  url: 'wss://api.example.com/stream',
  protocols: ['audio-stream']
})
function sendAudioChunk(chunk) {
  socketTask.send({
    data: chunk,
    success() { console.log('分片发送成功') }
  })
}

6.2 方言识别支持

腾讯云等服务商提供多语言引擎，通过参数切换：

const engineParams = {
  '16k_zh': '普通话',
  '16k_en': '英语',
  '16k_ca': '粤语'
}

6.3 语音情绪分析

结合NLP服务实现情感识别，扩展应用场景至客服、教育等领域。

通过上述方案，开发者可在UniApp框架下高效实现跨平台语音输入功能。实际开发中需特别注意各平台的权限模型差异（如微信小程序的临时授权与H5的持久化权限），建议建立统一的权限管理模块。对于高并发场景，推荐采用腾讯云等成熟服务商的语音服务，其提供的QPS保障和全球节点部署能显著提升系统稳定性。