一、语音输入功能技术背景与需求分析

在移动端交互场景中，语音输入较传统键盘输入效率提升3-5倍，尤其适用于长文本输入、驾驶场景等特殊环境。UniApp作为跨平台开发框架，需同时适配微信小程序和H5的差异化API体系，其中小程序端依赖wx.getRecorderManager，而H5端需调用Web Audio API或第三方SDK。

技术实现难点主要体现在三方面：1）平台权限管理差异（微信需动态申请录音权限，H5需处理浏览器安全策略）；2）音频格式转换（小程序默认输出mp3，H5需兼容wav/ogg）；3）实时性要求（语音识别延迟需控制在500ms内）。

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

1. 录音权限管理

// 动态申请录音权限
uni.authorize({
  scope: 'scope.record',
  success() {
    startRecord();
  },
  fail(err) {
    uni.showModal({
      title: '权限申请',
      content: '需要录音权限以使用语音功能',
      success(res) {
        if (res.confirm) {
          uni.openSetting();
        }
      }
    });
  }
});

微信6.5.21版本后强制要求动态权限申请，未授权将导致录音API调用失败。建议将权限申请放在功能入口处，避免中途拦截。

2. 录音核心实现

const recorderManager = uni.getRecorderManager();
recorderManager.onStart(() => {
  console.log('录音开始');
});
recorderManager.onStop((res) => {
  const { tempFilePath } = res;
  // 临时文件路径示例：wxfile://tmp_xxxx.mp3
  uploadAudio(tempFilePath);
});
function startRecord() {
  recorderManager.start({
    format: 'mp3',
    duration: 60000, // 最大录音时长
    sampleRate: 16000,
    numberOfChannels: 1
  });
}

关键参数说明：采样率建议16kHz（语音识别标准），单声道可减少50%数据量。录音时长限制需结合业务场景，微信小程序单次录音最长60秒。

3. 语音识别集成

推荐使用微信原生wx.getFileSystemManager读取临时文件后，通过uni.uploadFile上传至后端服务。对于离线场景，可集成腾讯云语音识别SDK（需单独申请权限）。

三、H5端实现方案

1. 浏览器兼容性处理

function checkAudioSupport() {
  const AudioContext = window.AudioContext || window.webkitAudioContext;
  if (!AudioContext) {
    uni.showToast({ title: '浏览器不支持音频功能', icon: 'none' });
    return false;
  }
  return true;
}

iOS Safari需在用户交互事件（如click）中初始化AudioContext，否则会抛出安全异常。建议将录音按钮置于显眼位置，引导用户主动触发。

2. MediaRecorder API实现

async function startH5Record() {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  const mediaRecorder = new MediaRecorder(stream, {
    mimeType: 'audio/webm',
    audioBitsPerSecond: 32000
  });
  const chunks = [];
  mediaRecorder.ondataavailable = (e) => chunks.push(e.data);
  mediaRecorder.onstop = async () => {
    const blob = new Blob(chunks, { type: 'audio/webm' });
    const audioUrl = URL.createObjectURL(blob);
    // 处理音频数据
  };
  mediaRecorder.start(100); // 每100ms收集一次数据
}

H5端音频格式需注意：Chrome默认支持webm，Firefox支持ogg，Safari需转换格式。建议后端统一转码为wav格式处理。

3. 第三方SDK集成

对于需要高精度识别的场景，可集成科大讯飞、阿里云等语音服务：

// 示例：调用科大讯飞WebAPI
async function recognizeSpeech(audioBlob) {
  const formData = new FormData();
  formData.append('audio', audioBlob, 'record.wav');
  const response = await fetch('https://api.xfyun.cn/v1/service/v1/iat', {
    method: 'POST',
    headers: {
      'X-Appid': 'YOUR_APPID',
      'X-CurTime': Math.floor(Date.now()/1000),
      'X-Param': JSON.stringify({ engine_type: 'sms16k' })
    },
    body: formData
  });
  return response.json();
}

四、跨平台兼容处理

1. 条件编译方案

// #ifdef MP-WEIXIN
const recorder = uni.getRecorderManager();
// #endif
// #ifdef H5
let mediaRecorder;
// #endif
function initRecorder() {
  // #ifdef MP-WEIXIN
  initWXRecorder();
  // #endif
  // #ifdef H5
  initH5Recorder();
  // #endif
}

UniApp的条件编译可精准控制平台代码，避免无效代码打包。

2. 音频格式转换

推荐使用lamejs库进行mp3转码：

// H5端将webm转mp3示例
import lamejs from 'lamejs';
function convertToMp3(audioData) {
  const mp3Encoder = new lamejs.Mp3Encoder(1, 16000, 128);
  const samples = new Int16Array(audioData);
  const mp3Data = mp3Encoder.encodeBuffer(samples);
  return new Blob([mp3Data], { type: 'audio/mp3' });
}

3. 性能优化建议

1. 录音采样率统一为16kHz，平衡音质与数据量
2. 使用Web Worker处理音频数据，避免主线程阻塞
3. 微信小程序启用enableNoiseSuppression降噪
4. H5端限制同时存在的录音实例数量

五、完整项目实践建议

1. 架构设计：采用适配器模式封装平台差异，定义统一的IRecorder接口
2. 错误处理：建立完善的重试机制（网络中断、权限拒绝等场景）
3. 测试策略：
   • 微信端：真机测试不同版本（基础库2.14.0+支持完整功能）
   • H5端：测试Chrome/Firefox/Safari三大浏览器
4. 用户体验：
   • 录音时显示声波动画增强反馈
   • 提供试听功能
   • 长录音分段处理（每60秒上传一个片段）

六、进阶功能扩展

1. 实时语音转文字：结合WebSocket实现流式识别
2. 语音指令识别：通过端点检测（VAD）实现关键词唤醒
3. 多语言支持：集成多语种识别引擎
4. 音频特效：实时变声、降噪处理

实际开发中，某电商项目通过集成该方案，使商品评价输入效率提升40%，用户操作时长从平均120秒降至75秒。建议开发者根据具体业务场景，在识别准确率（95%+）和响应延迟（<300ms）之间找到平衡点。