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

随着移动端交互方式的升级，语音输入已成为提升用户体验的核心功能。在UniApp跨端开发场景中，微信小程序和H5的语音实现存在显著差异：微信小程序提供原生录音API，而H5需依赖浏览器WebRTC或第三方服务。开发者需解决权限管理、音频处理、跨端兼容三大核心问题。

1.1 语音输入的核心技术挑战

• 权限管理差异：微信小程序需动态申请录音权限，H5需处理浏览器安全策略限制
• 音频格式兼容：小程序默认生成MP3/AAC，H5需处理PCM/WAV格式转换
• 实时性要求：语音识别需平衡识别准确率与响应延迟
• 跨端封装：需统一API接口，隐藏平台差异

1.2 典型应用场景

• 智能客服：语音问答系统
• 社交应用：语音消息发送
• 教育产品：口语评测功能
• 无障碍服务：语音导航与操作

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

2.1 录音权限管理

// 动态申请录音权限
uni.authorize({
  scope: 'scope.record',
  success() {
    console.log('授权成功');
    startRecord();
  },
  fail(err) {
    console.error('授权失败:', err);
    uni.showModal({
      title: '提示',
      content: '需要录音权限才能使用语音功能',
      showCancel: false
    });
  }
});

2.2 录音API调用流程

let recorderManager = uni.getRecorderManager();
// 配置录音参数
const recordOptions = {
  format: 'mp3', // 微信小程序支持格式
  sampleRate: 16000,
  numberOfChannels: 1,
  encodeBitRate: 128000,
  frameSize: 50
};
// 开始录音
function startRecord() {
  recorderManager.start(recordOptions);
  recorderManager.onStart(() => {
    console.log('录音开始');
  });
  recorderManager.onError((err) => {
    console.error('录音错误:', err);
  });
}
// 停止录音并处理
function stopRecord() {
  recorderManager.stop();
  recorderManager.onStop((res) => {
    console.log('录音文件:', res.tempFilePath);
    // 此处可上传服务器或进行本地识别
    uploadAudio(res.tempFilePath);
  });
}

2.3 语音转文字实现

推荐使用微信原生语音识别API或集成第三方服务：

// 使用微信语音识别（需配置合法域名）
uni.uploadFile({
  url: 'https://api.weixin.qq.com/cgi-bin/media/audio/tovoice',
  filePath: tempFilePath,
  name: 'media',
  formData: {
    access_token: 'YOUR_ACCESS_TOKEN'
  },
  success(res) {
    const data = JSON.parse(res.data);
    console.log('识别结果:', data.result);
  }
});

三、H5端实现方案

3.1 WebRTC录音实现

// 检查浏览器兼容性
function checkBrowserSupport() {
  return navigator.mediaDevices && 
         navigator.mediaDevices.getUserMedia;
}
// 初始化录音
async function initH5Recorder() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: true,
      echoCancellation: true
    });
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    const source = audioContext.createMediaStreamSource(stream);
    const processor = audioContext.createScriptProcessor(4096, 1, 1);
    source.connect(processor);
    processor.connect(audioContext.destination);
    processor.onaudioprocess = (e) => {
      const buffer = e.inputBuffer.getChannelData(0);
      // 处理音频数据或发送到WebWorker
    };
  } catch (err) {
    console.error('录音初始化失败:', err);
  }
}

3.2 第三方服务集成

推荐使用以下成熟方案：

• 阿里云语音识别：提供高精度实时识别
• 腾讯云语音转文字：支持长语音分段处理
• 科大讯飞SDK：离线识别能力

// 示例：调用腾讯云语音识别
async function recognizeSpeech(audioData) {
  const formData = new FormData();
  formData.append('audio', new Blob([audioData]), 'record.wav');
  formData.append('engine_type', 'sms16k');
  formData.append('channel_num', 1);
  const response = await fetch('https://recognition.tencentcloudapi.com', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer YOUR_TOKEN'
    },
    body: formData
  });
  const result = await response.json();
  return result.data.result;
}

四、跨端兼容方案

4.1 条件编译实现

// #ifdef MP-WEIXIN
const recordApi = uni.getRecorderManager();
// #endif
// #ifdef H5
let mediaRecorder;
// #endif
export function startRecording() {
  // #ifdef MP-WEIXIN
  recordApi.start({
    format: 'mp3'
  });
  // #endif
  // #ifdef H5
  initH5Recorder();
  // #endif
}

4.2 统一接口设计

class VoiceRecorder {
  constructor() {
    this.platform = uni.getSystemInfoSync().platform;
  }
  async start() {
    if (this.platform === 'mp-weixin') {
      return this.startWeixinRecord();
    } else if (this.platform === 'h5') {
      return this.startH5Record();
    }
  }
  async startWeixinRecord() {
    // 微信小程序实现
  }
  async startH5Record() {
    // H5实现
  }
}

五、性能优化与最佳实践

5.1 录音参数优化

• 采样率选择：16kHz适合语音识别，8kHz节省带宽
• 码率控制：语音场景推荐64-128kbps
• 帧大小设置：4096字节平衡延迟与处理效率

5.2 错误处理机制

function handleRecordError(err) {
  const errorMap = {
    'PERMISSION_DENIED': '用户拒绝录音权限',
    'NOT_SUPPORTED': '浏览器不支持录音功能',
    'NETWORK_ERROR': '网络请求失败'
  };
  const errorMsg = errorMap[err.code] || '未知错误';
  uni.showToast({
    title: errorMsg,
    icon: 'none'
  });
  // 错误上报
  trackError('RECORD_FAILURE', {
    code: err.code,
    message: err.message
  });
}

5.3 测试验证要点

1. 权限测试：模拟用户拒绝权限场景
2. 中断测试：处理来电、切换应用等中断事件
3. 兼容性测试：覆盖主流浏览器和小程序版本
4. 性能测试：长录音内存占用与CPU消耗

六、完整项目集成建议

1. 模块化设计：将录音功能封装为独立模块
2. 状态管理：使用Vuex管理录音状态
3. UI组件库：集成标准录音按钮与波形显示组件
4. 文档完善：提供详细的API说明与示例代码

// 示例：完整的录音管理器
export default {
  state: {
    isRecording: false,
    tempFilePath: null
  },
  mutations: {
    SET_RECORDING(state, status) {
      state.isRecording = status;
    },
    SET_TEMP_FILE(state, path) {
      state.tempFilePath = path;
    }
  },
  actions: {
    async startRecord({ commit }) {
      // 实现跨端录音逻辑
      commit('SET_RECORDING', true);
    },
    stopRecord({ commit, state }) {
      // 停止录音并处理结果
      commit('SET_RECORDING', false);
    }
  }
}

通过以上方案，开发者可以在UniApp中实现高效的跨端语音输入功能。实际开发中需根据具体业务需求调整参数配置，并充分测试不同平台下的表现。建议结合云服务实现更复杂的语音处理需求，同时注意用户隐私数据保护。