基于uniapp实现语音输入功能（微信小程序、H5）全解析

一、技术背景与功能定位

在移动端交互场景中，语音输入已成为提升用户体验的核心功能。uniapp作为跨平台开发框架，支持微信小程序与H5双端适配，开发者可通过统一API实现语音采集、处理与转换。本文聚焦以下技术点：

1. 微信小程序端录音API调用
2. H5端WebRTC语音采集方案
3. 跨端兼容性处理
4. 语音转文字（ASR）集成
5. 权限管理与异常处理

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

2.1 录音权限配置

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

{
  "mp-weixin": {
    "appid": "你的小程序ID",
    "requiredPrivateInfos": ["getRecorderManager", "chooseMessageFile"]
  }
}

2.2 核心录音实现

使用小程序原生RecorderManager：

// 初始化录音管理器
const recorderManager = uni.getRecorderManager()
// 配置录音参数
const recordOptions = {
  format: 'mp3',
  encoder: 'AAC',
  sampleRate: 16000,
  numberOfChannels: 1
}
// 开始录音
startRecord() {
  recorderManager.start(recordOptions)
  recorderManager.onStart(() => {
    console.log('录音开始')
  })
  recorderManager.onError((err) => {
    console.error('录音错误', err)
  })
}
// 停止录音
stopRecord() {
  recorderManager.stop()
  recorderManager.onStop((res) => {
    const tempFilePath = res.tempFilePath
    this.handleAudioFile(tempFilePath)
  })
}

2.3 语音转文字集成

推荐使用腾讯云ASR（需自行申请API密钥）：

async function speechToText(filePath) {
  const cloudApi = new uniCloud.httpclient()
  const formData = {
    audio: uni.getFileSystemManager().readFileSync(filePath, 'base64'),
    engine_type: '16k_zh'
  }
  try {
    const res = await cloudApi.request({
      url: 'https://api.tencentcloudapi.com/asr/v3/CreateRecTask',
      method: 'POST',
      data: formData,
      header: {
        'Authorization': 'Bearer ' + this.getToken()
      }
    })
    return res.data.Result
  } catch (e) {
    console.error('ASR识别失败', e)
  }
}

三、H5端实现方案

3.1 WebRTC语音采集

通过MediaRecorderAPI实现：

async startH5Record() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
    const mediaRecorder = new MediaRecorder(stream, {
      mimeType: 'audio/webm',
      audioBitsPerSecond: 128000
    })
    const audioChunks = []
    mediaRecorder.ondataavailable = event => {
      audioChunks.push(event.data)
    }
    mediaRecorder.onstop = async () => {
      const audioBlob = new Blob(audioChunks, { type: 'audio/webm' })
      const audioUrl = URL.createObjectURL(audioBlob)
      this.uploadH5Audio(audioBlob)
    }
    mediaRecorder.start()
    this.mediaRecorder = mediaRecorder
  } catch (err) {
    console.error('H5录音错误', err)
  }
}

3.2 跨端兼容处理

使用条件编译实现差异化逻辑：

// #ifdef MP-WEIXIN
const audioPath = await this.wxRecord()
// #endif
// #ifdef H5
const audioBlob = await this.h5Record()
// #endif

四、关键问题解决方案

4.1 录音权限处理

小程序端：

uni.authorize({
  scope: 'scope.record',
  success() {
    startRecord()
  },
  fail() {
    uni.showModal({
      title: '提示',
      content: '需要录音权限',
      success(res) {
        if (res.confirm) {
          uni.openSetting()
        }
      }
    })
  }
})

H5端：

function checkH5Permission() {
  return new Promise((resolve) => {
    navigator.permissions.query({ name: 'microphone' })
      .then(result => {
        resolve(result.state === 'granted')
      })
  })
}

4.2 录音时长限制

小程序端需处理1分钟限制：

let recordTimer
const MAX_DURATION = 60000 // 1分钟
startRecord() {
  recorderManager.start()
  recordTimer = setTimeout(() => {
    this.stopRecord()
    uni.showToast({ title: '录音达到1分钟上限', icon: 'none' })
  }, MAX_DURATION)
}
stopRecord() {
  clearTimeout(recordTimer)
  recorderManager.stop()
}

五、性能优化建议

1. 音频压缩：使用lamejs库在H5端实现MP3编码
2. 分片上传：大文件分片传输（推荐每段10s）
3. 内存管理：及时释放URL.createObjectURL()创建的对象
4. 网络优化：

   // 使用uni.uploadFile实现断点续传
   uni.uploadFile({
     url: 'https://example.com/upload',
     filePath: tempFilePath,
     name: 'audio',
     formData: {
       'chunk': '1',
       'chunks': '5'
     }
   })

六、完整实现示例

6.1 组件封装

// components/voice-input.vue
export default {
  methods: {
    async handleRecord() {
      // #ifdef MP-WEIXIN
      await this.wxRecordFlow()
      // #endif
      // #ifdef H5
      await this.h5RecordFlow()
      // #endif
    },
    async wxRecordFlow() {
      // 实现微信端完整流程
    },
    async h5RecordFlow() {
      // 实现H5端完整流程
    }
  }
}

6.2 页面调用

<template>
  <view>
    <button @click="startRecord">开始录音</button>
    <button @click="stopRecord">停止录音</button>
    <text v-if="transcript">{{ transcript }}</text>
  </view>
</template>
<script>
import VoiceInput from '@/components/voice-input.vue'
export default {
  components: { VoiceInput },
  data() {
    return {
      transcript: ''
    }
  },
  methods: {
    async onVoiceResult(text) {
      this.transcript = text
    }
  }
}
</script>

七、调试与测试要点

1. 真机测试：必须使用微信开发者工具+真机调试
2. H5兼容性：测试Chrome/Safari/Firefox不同版本
3. 性能监控：

   // 录音性能统计
   const startTime = performance.now()
   recorderManager.onStop(() => {
     const duration = performance.now() - startTime
     console.log(`录音耗时：${duration}ms`)
   })

4. 异常场景：
   • 用户拒绝权限
   • 录音过程中切换应用
   • 网络中断恢复

八、进阶功能扩展

1. 语音情绪识别：集成第三方API分析语调
2. 实时语音转写：使用WebSocket实现流式识别
3. 多语言支持：配置ASR引擎的语言参数
4. 声纹识别：结合生物特征验证用户身份

九、总结与最佳实践

1. 统一接口设计：封装跨端语音服务类
2. 状态管理：使用Vuex管理录音状态
3. 用户体验：
   • 添加声波动画反馈
   • 实现长按录音/点击取消交互
4. 安全考虑：
   • 敏感语音数据加密传输
   • 遵守《个人信息保护法》相关条款

通过本文方案，开发者可在uniapp中快速构建稳定的语音输入功能，覆盖微信小程序与H5双端场景。实际开发中需根据业务需求选择合适的ASR服务提供商，并做好异常处理和性能优化工作。