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

在移动应用开发中，语音输入已成为提升用户体验的重要功能。uniapp作为跨平台开发框架，支持开发者通过一套代码实现微信小程序和H5的语音输入功能。本文将详细介绍如何在uniapp中实现这一功能，包括环境准备、API调用、权限处理及跨端兼容方案。

一、环境准备与基础配置

1.1 平台差异分析

微信小程序和H5在语音输入实现上存在显著差异：

• 微信小程序：提供wx.getRecorderManager()和wx.startRecord()等原生API
• H5环境：依赖浏览器WebRTC API或第三方语音识别服务

uniapp通过条件编译和插件市场解决方案，有效弥合了这些差异。开发者需在manifest.json中配置：

{
  "mp-weixin": {
    "appid": "你的小程序ID",
    "requiredBackgroundModes": ["audio"]
  },
  "h5": {
    "title": "语音输入示例"
  }
}

1.2 权限声明

微信小程序需在app.json中声明录音权限：

{
  "permission": {
    "scope.record": {
      "desc": "需要录音权限以实现语音输入"
    }
  }
}

H5环境需在页面加载时动态请求麦克风权限，可通过navigator.mediaDevices.getUserMedia({audio: true})实现。

二、核心实现方案

2.1 微信小程序实现

使用小程序原生录音管理器：

// 创建录音管理器
const recorderManager = uni.getRecorderManager()
// 配置录音参数
const options = {
  format: 'mp3',
  duration: 60000, // 最大录音时长
  encoder: uni.RecorderManager.Encoder.MP3
}
// 开始录音
recorderManager.start(options)
// 录音事件监听
recorderManager.onStart(() => {
  console.log('录音开始')
})
recorderManager.onStop((res) => {
  console.log('录音停止', res.tempFilePath)
  // 此处可调用语音识别API
})

2.2 H5实现方案

H5环境推荐使用WebRTC API或集成第三方SDK：

// 检查浏览器支持
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
  uni.showToast({ title: '浏览器不支持录音', icon: 'none' })
  return
}
// 请求麦克风权限
navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    const mediaRecorder = new MediaRecorder(stream)
    const chunks = []
    mediaRecorder.ondataavailable = e => chunks.push(e.data)
    mediaRecorder.onstop = () => {
      const blob = new Blob(chunks, { type: 'audio/wav' })
      // 处理音频数据（上传或本地识别）
    }
    mediaRecorder.start()
    setTimeout(() => mediaRecorder.stop(), 5000) // 5秒录音
  })
  .catch(err => {
    console.error('录音错误:', err)
  })

2.3 跨端兼容方案

使用uniapp条件编译实现代码复用：

// #ifdef MP-WEIXIN
const recorder = uni.getRecorderManager()
// #endif
// #ifdef H5
let mediaRecorder
let audioStream
// #endif
export default {
  methods: {
    startRecording() {
      // #ifdef MP-WEIXIN
      recorder.start({ format: 'mp3' })
      // #endif
      // #ifdef H5
      navigator.mediaDevices.getUserMedia({ audio: true })
        .then(stream => {
          audioStream = stream
          mediaRecorder = new MediaRecorder(stream)
          // ...录音逻辑
        })
      // #endif
    },
    stopRecording() {
      // 平台特定停止逻辑
    }
  }
}

三、语音识别集成

3.1 微信小程序语音转文字

使用小程序wx.getFileSystemManager()和后端API：

recorderManager.onStop(async res => {
  // 上传到服务器识别
  const tempFilePath = res.tempFilePath
  const res = await uni.uploadFile({
    url: 'https://your-api.com/recognize',
    filePath: tempFilePath,
    name: 'audio'
  })
  console.log('识别结果:', JSON.parse(res.data).result)
})

3.2 H5语音识别方案

推荐使用Web Speech API（需注意浏览器兼容性）：

const recognition = new (window.SpeechRecognition || 
                      window.webkitSpeechRecognition || 
                      window.mozSpeechRecognition || 
                      window.msSpeechRecognition)()
recognition.lang = 'zh-CN'
recognition.interimResults = false
recognition.onresult = event => {
  const transcript = event.results[0][0].transcript
  console.log('识别结果:', transcript)
}
recognition.start()

对于不支持Web Speech API的浏览器，可集成第三方服务如阿里云语音识别、腾讯云ASR等。

四、性能优化与最佳实践

4.1 录音质量优化

• 小程序端：建议使用format: 'mp3'，采样率16000Hz
• H5端：通过MediaRecorder的audioBitsPerSecond控制码率

  // H5高质量录音配置
  const options = {
  mimeType: 'audio/webm;codecs=opus',
  audioBitsPerSecond: 32000
  }

4.2 内存管理

• 及时释放录音资源：
  ```javascript
  // 小程序端
  recorderManager.stop()
  recorderManager.destroy()

// H5端
mediaRecorder.stream.getTracks().forEach(track => track.stop())

### 4.3 用户体验设计
1. 录音状态可视化：使用`<progress>`组件显示录音时长
2. 音量反馈：通过`AudioContext`分析音频数据
3. 错误处理：捕获`PERMISSION_DENIED`和`NOT_SUPPORTED_ERROR`
## 五、常见问题解决方案
### 5.1 微信小程序录音失败
- 检查`app.json`是否声明录音权限
- 确保`duration`不超过小程序限制（默认60秒）
- 处理用户拒绝权限的情况：
```javascript
uni.authorize({
  scope: 'scope.record',
  success() { /* 授权成功 */ },
  fail() { 
    uni.showModal({
      title: '需要录音权限',
      content: '请在设置中开启麦克风权限',
      showCancel: false
    })
  }
})

5.2 H5浏览器兼容性

• 测试主流浏览器（Chrome、Firefox、Safari）
• 提供降级方案：显示文本输入框作为备用
• 使用@vue/composition-api的onMounted检测API支持

六、进阶功能实现

6.1 实时语音转写

结合WebSocket实现低延迟识别：

// 小程序端
const socketTask = uni.connectSocket({
  url: 'wss://your-api.com/ws',
  success() {
    recorderManager.onStop(res => {
      uni.uploadFile({
        url: 'https://your-api.com/upload',
        filePath: res.tempFilePath,
        success: res => {
          const fileId = JSON.parse(res.data).fileId
          uni.sendSocketMessage({
            data: JSON.stringify({ type: 'start', fileId }),
            success: () => console.log('发送识别请求')
          })
        }
      })
    })
  }
})

6.2 语音指令控制

通过短语音识别实现指令解析：

// 识别结果处理
function parseCommand(text) {
  const commands = {
    '打开设置': () => uni.navigateTo({ url: '/pages/settings' }),
    '返回首页': () => uni.switchTab({ url: '/pages/index' })
  }
  for (const [cmd, action] of Object.entries(commands)) {
    if (text.includes(cmd)) {
      action()
      return true
    }
  }
  return false
}

七、完整示例项目结构

/pages/voice-input/
  ├── index.vue         # 主页面
  ├── recorder.js       # 录音管理封装
  ├── recognizer.js     # 语音识别封装
  └── utils/
      ├── audio-processor.js  # 音频处理工具
      └── permission.js       # 权限管理

八、总结与展望

uniapp实现跨平台语音输入需要综合考虑：

1. 平台差异处理（API调用、权限模型）
2. 性能优化（内存管理、录音质量）
3. 用户体验（状态反馈、错误处理）

未来发展方向：

• 集成更先进的端侧识别模型
• 支持多语种混合识别
• 实现更低延迟的实时转写

通过合理运用uniapp的条件编译和插件生态，开发者可以高效构建具备优秀语音交互体验的跨平台应用。建议在实际开发中先实现核心功能，再逐步完善异常处理和性能优化。