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

1.1 平台原生能力对比

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

1.2 跨端适配方案选择

方案一：条件编译+平台判断。通过#ifdef MP-WEIXIN等预编译指令区分代码逻辑，适合功能差异较大的场景。方案二：封装适配器层，将平台差异抽象为统一接口，提升代码可维护性。推荐采用方案二，示例结构如下：

// adapter/voice.js
export default {
  startRecord(options) {
    if (uni.getSystemInfoSync().platform === 'mp-weixin') {
      return wxStartRecord(options) // 微信小程序实现
    } else {
      return h5StartRecord(options) // H5实现
    }
  }
}

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

2.1 录音权限管理

在manifest.json中配置"requiredPrivateInfos": ["getRecorderManager"]，并在页面加载时动态申请权限：

uni.authorize({
  scope: 'scope.record',
  success() { console.log('授权成功') },
  fail() { uni.showModal({ title: '需要录音权限', content: '请在设置中开启' }) }
})

2.2 完整录音流程

// 初始化录音管理器
const recorderManager = uni.getRecorderManager()
recorderManager.onStart(() => { console.log('录音开始') })
recorderManager.onStop((res) => {
  const { tempFilePath, duration } = res
  // 处理录音文件
})
// 开始录音（微信特有参数）
recorderManager.start({
  format: 'mp3',
  sampleRate: 16000,
  encodeBitRate: 128000,
  duration: 60000 // 最大时长
})
// 停止录音
setTimeout(() => recorderManager.stop(), 5000)

三、H5端实现方案

3.1 浏览器兼容性处理

通过MediaRecorder.isTypeSupported()检测编码格式支持情况：

const isSupported = MediaRecorder.isTypeSupported('audio/webm;codecs=opus')
const options = isSupported 
  ? { mimeType: 'audio/webm;codecs=opus' }
  : { mimeType: 'audio/wav' } // 降级方案

3.2 完整实现示例

function startH5Record() {
  return new Promise((resolve, reject) => {
    navigator.mediaDevices.getUserMedia({ audio: true })
      .then(stream => {
        const mediaRecorder = new MediaRecorder(stream, options)
        const chunks = []
        mediaRecorder.ondataavailable = e => chunks.push(e.data)
        mediaRecorder.onstop = () => {
          const blob = new Blob(chunks, { type: options.mimeType })
          const audioUrl = URL.createObjectURL(blob)
          resolve({ audioUrl, duration: Date.now() - startTime })
          stream.getTracks().forEach(track => track.stop())
        }
        mediaRecorder.start(100) // 每100ms收集一次数据
        setTimeout(() => mediaRecorder.stop(), 5000)
      })
      .catch(err => reject(new Error('麦克风访问失败')))
  })
}

四、跨端统一封装实践

4.1 适配器层设计

// voice-adapter.js
const platformMap = {
  mpWeixin: {
    start: (options) => wxStartRecord(options),
    stop: (cb) => wxStopRecord(cb)
  },
  h5: {
    start: (options) => h5StartRecord(options),
    stop: (cb) => h5StopRecord(cb)
  }
}
export function createVoiceAdapter(platform) {
  const platformImpl = platformMap[platform] || platformMap.h5
  return {
    startRecord(options) {
      return platformImpl.start(options)
    },
    stopRecord(callback) {
      return platformImpl.stop(callback)
    }
  }
}

4.2 页面组件实现

<template>
  <view>
    <button @click="startRecording">开始录音</button>
    <button @click="stopRecording" :disabled="!isRecording">停止录音</button>
    <audio v-if="audioUrl" :src="audioUrl" controls></audio>
  </view>
</template>
<script>
import { createVoiceAdapter } from '@/adapter/voice'
export default {
  data() {
    return {
      isRecording: false,
      audioUrl: '',
      adapter: null
    }
  },
  created() {
    const platform = uni.getSystemInfoSync().platform
    this.adapter = createVoiceAdapter(platform === 'mp-weixin' ? 'mpWeixin' : 'h5')
  },
  methods: {
    async startRecording() {
      try {
        await uni.authorize({ scope: 'scope.record' })
        this.isRecording = true
        const result = await this.adapter.startRecord({
          duration: 60000,
          format: 'mp3'
        })
        // 处理录音结果
      } catch (error) {
        uni.showToast({ title: error.message, icon: 'none' })
      }
    },
    stopRecording() {
      this.adapter.stopRecord((res) => {
        this.audioUrl = res.tempFilePath || res.audioUrl
        this.isRecording = false
      })
    }
  }
}
</script>

五、性能优化与异常处理

5.1 内存管理策略

微信小程序端：及时调用uni.saveFile将临时文件持久化，避免占用过多内存

H5端：使用URL.revokeObjectURL()释放对象URL

// H5端资源释放示例
const blobUrl = URL.createObjectURL(blob)
// 使用完毕后
setTimeout(() => URL.revokeObjectURL(blobUrl), 1000)

5.2 常见错误处理

错误类型	微信小程序	H5端	解决方案
权限拒绝	`errMsg: "authorize:fail"`	`NotAllowedError`	引导用户开启权限
设备占用	`errCode: 201`	`OverconstrainedError`	提示用户关闭其他录音应用
超时错误	`duration`参数设置不当	`MediaRecorder.stop()`未调用	增加超时保护机制

六、进阶功能扩展

6.1 实时语音转文字

结合微信小程序wx.getRealtimeLogManager和H5的Web Speech API实现：

// H5端语音识别示例
const recognition = new (window.SpeechRecognition || 
  window.webkitSpeechRecognition || 
  window.mozSpeechRecognition || 
  window.msSpeechRecognition)()
recognition.onresult = (event) => {
  const transcript = event.results[0][0].transcript
  console.log('识别结果:', transcript)
}
recognition.start()

6.2 录音波形可视化

使用<canvas>绘制音频波形：

function drawWaveform(canvasId, audioData) {
  const ctx = uni.createCanvasContext(canvasId, this)
  const width = 300
  const height = 100
  const step = Math.ceil(audioData.length / width)
  ctx.beginPath()
  for (let i = 0; i < width; i++) {
    const value = audioData[i * step] / 128
    ctx.lineTo(i, height / 2 - value * height / 2)
  }
  ctx.stroke()
  ctx.draw()
}

七、测试与发布注意事项

真机测试：模拟器无法完全模拟麦克风权限和硬件差异
性能测试：连续录音30分钟以上检查内存泄漏
兼容性测试：覆盖iOS/Android不同版本、微信基础库版本
审核要点：
- 微信小程序需在app.json中声明录音权限
- H5端需处理HTTPS环境限制
- 提供明确的隐私政策说明语音数据处理方式

通过以上方案，开发者可以在UniApp中构建出兼容微信小程序和H5的高质量语音输入功能。实际开发中建议采用渐进式增强策略，先实现基础录音功能，再逐步添加波形显示、实时转写等高级特性。对于复杂场景，可考虑使用成熟的语音SDK（如腾讯云、阿里云等提供的服务），但需注意本文要求避免提及具体厂商技术支持。

UniApp跨端语音输入功能开发指南：微信小程序与H5全场景实现