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

一、语音输入功能的核心价值与适用场景

语音输入作为人机交互的重要方式，在移动端应用中具有显著优势：提升输入效率（尤其适合长文本输入）、降低操作门槛（如老年用户或双手忙碌场景）、增强交互趣味性（如语音搜索、语音指令）。在uniapp开发的微信小程序和H5应用中，语音输入可广泛应用于客服系统、搜索框、社交聊天、语音笔记等场景。

1.1 微信小程序与H5的语音输入差异

• 微信小程序：依赖微信提供的原生API（如wx.startRecord、wx.getRecorderManager），权限控制严格，需用户主动授权。
• H5端：通过浏览器WebRTC API或第三方SDK（如科大讯飞、腾讯云语音）实现，兼容性受浏览器限制（如iOS Safari对录音API的支持需HTTPS）。

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

2.1 使用微信原生录音API

微信小程序提供了完整的录音管理API，支持实时录音、暂停、停止及音频文件处理。

示例代码：

// 1. 初始化录音管理器
const recorderManager = wx.getRecorderManager();
// 2. 配置录音参数
const options = {
  duration: 60000, // 录音时长（ms）
  sampleRate: 44100, // 采样率
  numberOfChannels: 1, // 单声道
  encodeBitRate: 192000, // 编码码率
  format: 'mp3', // 音频格式
  frameSize: 50 // 指定帧大小（单位KB）
};
// 3. 开始录音
recorderManager.start(options);
// 4. 监听录音事件
recorderManager.onStart(() => {
  console.log('录音开始');
});
recorderManager.onStop((res) => {
  console.log('录音停止', res.tempFilePath); // 临时文件路径
  // 可上传至服务器或进行本地处理
});
// 5. 停止录音
recorderManager.stop();

关键点：

• 权限申请：需在app.json中声明record权限，并通过wx.authorize提前请求授权。
• 临时文件处理：录音结果为临时文件，需通过wx.saveFile或上传至服务器持久化。
• 兼容性：基础库版本需≥1.9.94。

2.2 使用uniapp插件市场扩展组件

对于复杂需求（如语音转文字），可引入第三方插件（如uni-recorder），简化开发流程。

三、H5端实现方案

3.1 基于WebRTC的录音实现

H5可通过MediaRecorder API实现录音，但需注意浏览器兼容性。

示例代码：

// 1. 请求麦克风权限
navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    const mediaRecorder = new MediaRecorder(stream);
    const audioChunks = [];
    // 2. 开始录音
    mediaRecorder.start();
    // 3. 收集音频数据
    mediaRecorder.ondataavailable = event => {
      audioChunks.push(event.data);
    };
    // 4. 停止录音并生成Blob
    mediaRecorder.onstop = () => {
      const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
      const audioUrl = URL.createObjectURL(audioBlob);
      console.log('音频URL:', audioUrl);
      // 可上传或播放
    };
    // 5. 停止录音（示例：10秒后停止）
    setTimeout(() => mediaRecorder.stop(), 10000);
  })
  .catch(err => console.error('录音错误:', err));

关键点：

• HTTPS要求：iOS Safari等浏览器仅在HTTPS或localhost下允许录音。
• 格式支持：不同浏览器支持的音频格式可能不同（如Chrome支持audio/webm，Safari支持audio/wav）。
• 权限处理：需通过navigator.mediaDevices.getUserMedia动态请求权限。

3.2 集成第三方语音SDK

对于语音转文字需求，可接入科大讯飞、腾讯云等SDK，但需注意：

• H5端限制：部分SDK需通过WebView注入JS桥接，或使用后端服务中转。
• 跨域问题：若SDK依赖后端API，需配置CORS。

四、跨端兼容方案

4.1 条件编译实现差异化代码

uniapp的条件编译可针对不同平台编写特定代码：

// #ifdef MP-WEIXIN
// 微信小程序录音逻辑
const recorderManager = wx.getRecorderManager();
// #endif
// #ifdef H5
// H5录音逻辑
navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => { /* ... */ });
// #endif

4.2 封装统一API

建议封装一个VoiceRecorder类，对外提供统一接口（如start、stop、upload），内部根据平台调用不同实现。

五、常见问题与优化建议

5.1 权限被拒处理

• 微信小程序：监听wx.onUserCaptureScreen或引导用户到设置页手动开启权限。
• H5端：通过try-catch捕获权限错误，提示用户刷新页面或检查浏览器设置。

5.2 性能优化

• 录音时长限制：微信小程序单次录音最长60秒，需分段处理。
• 音频压缩：使用lamejs等库在前端压缩音频，减少上传流量。
• 后台录音：微信小程序需配置requiredBackgroundModes，H5端需保持页面活跃。

5.3 测试要点

• 真机测试：模拟器可能无法准确反映权限和录音效果。
• 多浏览器测试：H5端需覆盖Chrome、Safari、Firefox等主流浏览器。
• 弱网测试：验证音频上传的断点续传能力。

六、总结与扩展

通过uniapp实现语音输入功能，需结合平台特性选择合适方案：微信小程序优先使用原生API，H5端依赖WebRTC或第三方SDK。对于复杂需求（如语音识别），可考虑后端服务中转或接入专业语音服务。未来可探索AI语音交互（如语音唤醒、语义理解）的集成，进一步提升用户体验。

附：推荐资源

• 微信小程序录音API文档
• MDN WebRTC API参考
• uniapp条件编译指南
• 科大讯飞H5语音SDK文档

通过本文的方案，开发者可快速在uniapp项目中实现跨端的语音输入功能，覆盖微信小程序和H5的主要场景。