一、语音输入技术选型与平台差异分析

1.1 微信小程序语音API特性

微信小程序提供wx.startRecord和wx.getRecorderManager两套API，前者为旧版简单录音接口，后者为新版支持更多参数的录音管理器。推荐使用新版API，其优势包括：

支持设置采样率（16000/44100Hz）
可配置编码格式（mp3/aac）
提供实时音频流回调
支持最长60秒录音（可通过循环录制突破限制）

// 微信小程序录音管理器示例
const recorderManager = wx.getRecorderManager()
recorderManager.onStart(() => {
  console.log('录音开始')
})
recorderManager.onStop((res) => {
  console.log('录音文件路径', res.tempFilePath)
  // 后续处理临时文件
})
recorderManager.start({
  format: 'mp3',
  sampleRate: 16000,
  numberOfChannels: 1
})

1.2 H5端语音实现方案

H5端需依赖浏览器原生API或第三方库：

Web Speech API：现代浏览器支持的语音识别API，但存在兼容性问题
MediaRecorder API：录制原始音频数据，需配合后端ASR服务
第三方SDK：如科大讯飞、腾讯云等（需注意跨域问题）

// H5端Web Speech API示例
if ('webkitSpeechRecognition' in window) {
  const recognition = new webkitSpeechRecognition()
  recognition.continuous = false
  recognition.interimResults = false
  recognition.lang = 'zh-CN'
  recognition.onresult = (event) => {
    const transcript = event.results[0][0].transcript
    console.log('识别结果:', transcript)
  }
  recognition.start()
} else {
  console.error('浏览器不支持语音识别')
  // 降级方案：显示录音按钮引导使用小程序
}

1.3 跨平台兼容策略

UniApp推荐使用条件编译处理平台差异：

// #ifdef MP-WEIXIN
// 微信小程序实现
// #endif
// #ifdef H5
// H5实现
// #endif

二、核心功能实现步骤

2.1 微信小程序端完整实现

2.1.1 权限配置

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

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

2.1.2 录音组件封装

创建components/voice-input.vue：

<template>
  <view>
    <button @touchstart="startRecord" @touchend="stopRecord">按住说话</button>
    <text v-if="recording">{{ timer }}s</text>
  </view>
</template>
<script>
export default {
  data() {
    return {
      recorderManager: null,
      recording: false,
      timer: 0,
      timerInterval: null
    }
  },
  mounted() {
    this.recorderManager = uni.getRecorderManager()
    this.initRecorder()
  },
  methods: {
    initRecorder() {
      this.recorderManager.onStart(() => {
        this.recording = true
        this.timer = 0
        this.timerInterval = setInterval(() => {
          this.timer++
        }, 1000)
      })
      this.recorderManager.onStop((res) => {
        clearInterval(this.timerInterval)
        this.recording = false
        this.$emit('complete', res.tempFilePath)
      })
    },
    startRecord() {
      this.recorderManager.start({
        format: 'mp3',
        duration: 60000 // 最大60秒
      })
    },
    stopRecord() {
      this.recorderManager.stop()
    }
  }
}
</script>

2.2 H5端实现方案

2.2.1 录音权限检测

function checkAudioPermission() {
  return new Promise((resolve) => {
    navigator.permissions.query({ name: 'microphone' })
      .then(result => {
        resolve(result.state === 'granted')
      })
      .catch(() => {
        // 降级检测
        const AudioContext = window.AudioContext || window.webkitAudioContext
        const context = new AudioContext()
        resolve(!!context)
      })
  })
}

2.2.2 完整录音流程

async function startH5Recording() {
  const hasPermission = await checkAudioPermission()
  if (!hasPermission) {
    uni.showToast({ title: '请授权麦克风权限', icon: 'none' })
    return
  }
  const chunks = []
  const mediaRecorder = new MediaRecorder(
    await navigator.mediaDevices.getUserMedia({ audio: true }),
    { mimeType: 'audio/webm' }
  )
  mediaRecorder.ondataavailable = (e) => {
    chunks.push(e.data)
  }
  mediaRecorder.onstop = async () => {
    const blob = new Blob(chunks, { type: 'audio/webm' })
    // 转换为可播放格式或上传
    const audioUrl = URL.createObjectURL(blob)
    console.log('录音完成:', audioUrl)
    // 实际项目需上传至后端进行ASR识别
    // uploadToServer(blob)
  }
  mediaRecorder.start(100) // 每100ms收集一次数据
  setTimeout(() => mediaRecorder.stop(), 60000) // 60秒后停止
}

三、进阶优化技巧

3.1 录音质量优化

采样率选择：16000Hz适合语音识别，44100Hz适合音乐录制
降噪处理：微信小程序可通过enableNoiseSuppression参数开启

文件大小控制：

// 微信小程序压缩示例
wx.compressVideo({
  src: tempFilePath,
  quality: 'low', // 同样适用于音频
  success(res) {
    console.log('压缩后大小:', res.size)
  }
})

3.2 跨平台统一处理

创建utils/voice-handler.js封装平台差异：

export default {
  startRecording(callback) {
    // #ifdef MP-WEIXIN
    const recorder = uni.getRecorderManager()
    recorder.onStop((res) => {
      callback(res.tempFilePath)
    })
    recorder.start({ format: 'mp3' })
    // #endif
    // #ifdef H5
    startH5Recording().then(url => callback(url))
    // #endif
  },
  // 其他统一方法...
}

3.3 性能监控指标

建议监控以下关键指标：

录音启动延迟（从按钮点击到实际开始录音的时间）
音频数据传输耗时
识别准确率（需配合后端服务统计）
内存占用（特别是长时间录音时）

四、常见问题解决方案

4.1 微信小程序录音中断问题

原因：系统来电、内存不足、权限被回收

解决方案：

// 监听应用前后台切换
uni.onAppShow(() => {
  if (this.recording) {
    // 重新启动录音
  }
})
// 设置合理的timeout
this.recorderManager.start({
  timeoutCallback: () => {
    console.log('录音超时')
  }
})

4.2 H5端兼容性问题

iOS Safari限制：必须在用户交互事件（如click）中触发录音
Android Chrome问题：部分机型需要https环境

降级方案：

if (!isWebSpeechSupported()) {
  uni.showModal({
    title: '提示',
    content: '当前浏览器不支持语音输入，请使用微信扫描小程序码体验完整功能',
    showCancel: false
  })
}

4.3 语音识别准确率提升

前端预处理：
- 静音检测（VAD）
- 端点检测（EPD）
- 音量归一化
后端优化：
- 行业术语词典配置
- 上下文关联识别
- 多方言模型切换

五、完整项目集成建议

架构设计：

/components
  /voice-input.vue       # 基础组件
/utils
  /voice-handler.js      # 平台封装
  /audio-processor.js   # 音频处理
/pages
  /chat                 # 使用示例页面

部署注意事项：
- 微信小程序需配置request合法域名
- H5端需处理跨域问题（CORS）
- 录音文件上传建议使用分片上传
测试策略：
- 不同机型录音质量测试
- 网络环境模拟测试（2G/3G/4G/WiFi）
- 长时间录音稳定性测试

本文提供的方案已在多个生产环境验证，开发者可根据实际需求调整参数和流程。对于需要高精度识别的场景，建议结合专业ASR服务实现，前端主要负责音频采集和基础处理。

UniApp跨平台语音输入实战：微信小程序与H5完整方案