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

1.1 平台差异与适配策略

微信小程序和H5在语音输入实现上存在显著差异：微信小程序提供wx.getRecorderManager原生API，而H5端需依赖WebRTC或第三方SDK。UniApp通过条件编译和跨端兼容层实现一套代码多端运行，开发者需在manifest.json中配置平台特征检测：

{
  "mp-weixin": {
    "appid": "小程序ID",
    "permission": {
      "scope.record": {
        "desc": "需要您的录音权限"
      }
    }
  },
  "h5": {
    "title": "语音输入演示",
    "template": "default"
  }
}

1.2 核心功能需求拆解

实现完整的语音输入需包含：录音权限申请、音频采集、实时波形显示、语音转文字、结果处理五个模块。微信小程序端可直接调用原生API，H5端建议使用Recorder.js库（兼容Chrome/Firefox/Edge）或腾讯云语音SDK。

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

2.1 录音管理器初始化

通过uni.getRecorderManager()获取实例，配置采样率、声道数等参数：

const recorderManager = uni.getRecorderManager()
const options = {
  format: 'mp3',
  sampleRate: 16000,
  numberOfChannels: 1,
  encodeBitRate: 128000
}

2.2 权限处理最佳实践

采用渐进式权限申请策略，在用户点击按钮时触发授权：

async function startRecord() {
  try {
    await uni.authorize({scope: 'scope.record'})
    recorderManager.start(options)
  } catch (e) {
    uni.showModal({
      content: '需要录音权限',
      success: (res) => {
        if (res.confirm) uni.openSetting()
      }
    })
  }
}

2.3 实时波形显示实现

通过onFrameRecorded回调获取音频数据，使用Canvas绘制波形：

recorderManager.onFrameRecorded((res) => {
  const frameData = new Uint8Array(res.frameBuffer)
  // 计算波形振幅并重绘Canvas
  drawWaveform(frameData)
})

三、H5端跨浏览器兼容方案

3.1 WebRTC录音实现

使用MediaRecorder API实现浏览器原生录音：

async function startH5Record() {
  const stream = await navigator.mediaDevices.getUserMedia({audio: true})
  const mediaRecorder = new MediaRecorder(stream, {
    mimeType: 'audio/webm',
    audioBitsPerSecond: 128000
  })
  mediaRecorder.ondataavailable = (e) => {
    const audioBlob = e.data
    // 处理音频数据
  }
  mediaRecorder.start(100) // 每100ms收集一次数据
}

3.2 第三方SDK集成

对于不支持WebRTC的浏览器（如Safari旧版），可集成腾讯云语音SDK：

<script src="https://web.sdk.qcloud.com/audio/weapp/widget/1.x.x/tc-speech.js"></script>
<script>
  const speechRecognizer = new TCSpeech({
    appKey: '您的AppKey',
    engineType: '16k_zh' // 16k采样率中文识别
  })
  speechRecognizer.start()
</script>

四、语音转文字服务集成

4.1 微信小程序语音识别

使用wx.getFileSystemManager()上传音频文件后调用后端API：

const fs = uni.getFileSystemManager()
fs.readFile({
  filePath: tempFilePath,
  encoding: 'base64',
  success: async (res) => {
    const result = await uni.request({
      url: 'https://your-api.com/asr',
      method: 'POST',
      data: {audio: res.data}
    })
  }
})

4.2 H5端服务端识别方案

推荐使用WebSocket实现实时语音转文字：

const socket = new WebSocket('wss://your-asr-service')
socket.onopen = () => {
  mediaRecorder.ondataavailable = (e) => {
    socket.send(e.data)
  }
}
socket.onmessage = (e) => {
  const transcript = JSON.parse(e.data).result
  updateTranscript(transcript)
}

五、性能优化与问题处理

5.1 内存管理策略

• 微信小程序：及时调用recorderManager.stop()释放资源
• H5端：及时关闭MediaStream和WebSocket连接

  function cleanup() {
  if (mediaRecorder?.state !== 'inactive') {
    mediaRecorder.stop()
    mediaRecorder.stream.getTracks().forEach(t => t.stop())
  }
  socket?.close()
  }

5.2 常见问题解决方案

1. 微信小程序录音失败：检查manifest.json权限配置，确保在真机上测试
2. H5端浏览器兼容性：通过navigator.mediaDevices检测支持情况，提供降级方案
3. 语音识别延迟：采用分段传输策略，每2秒发送一次音频数据

六、完整代码示例

6.1 跨端语音组件实现

// components/voice-input.vue
export default {
  methods: {
    async handleVoiceInput() {
      #ifdef MP-WEIXIN
      await this.startWxRecord()
      #endif
      #ifdef H5
      if (navigator.mediaDevices) {
        await this.startH5Record()
      } else {
        this.fallbackToSdk()
      }
      #endif
    },
    startWxRecord() {
      // 微信小程序实现
    },
    startH5Record() {
      // H5实现
    }
  }
}

6.2 样式适配方案

/* 通用样式 */
.voice-btn {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  background: #07C160;
}
/* H5端特殊处理 */
@media screen and (max-width: 768px) {
  .voice-btn {
    width: 80px;
    height: 80px;
  }
}

七、部署与测试要点

1. 微信小程序审核：确保在app.json中声明录音权限
2. H5端HTTPS要求：语音API需在安全上下文中调用
3. 多设备测试：覆盖iOS/Android不同版本系统
4. 性能测试：连续录音30分钟检查内存泄漏

通过上述方案，开发者可在UniApp框架下实现跨平台的语音输入功能，兼顾开发效率与用户体验。实际开发中建议采用模块化设计，将录音、识别、UI展示分离，便于后续维护和功能扩展。