一、语音输入功能需求分析

在移动应用开发中，语音输入已成为提升用户体验的重要功能。无论是微信小程序还是H5页面，用户都期望能够通过语音快速输入内容，特别是在移动端打字不便的场景下。uniapp作为跨平台开发框架，需要提供统一的API接口来实现这一功能，同时处理不同平台（微信小程序和H5）的差异。

1.1 核心功能需求

语音输入功能的核心需求包括：

• 录音控制（开始/停止）
• 实时语音转文字（可选）
• 录音文件保存与上传
• 平台兼容性处理

1.2 平台差异分析

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

• 微信小程序：提供wx.startRecord等专用API
• H5：依赖WebRTC或第三方服务实现

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

2.1 使用微信原生API

微信小程序提供了完整的录音API：

// 开始录音
wx.startRecord({
  success(res) {
    const tempFilePath = res.tempFilePath
    // 处理录音文件
  },
  fail(err) {
    console.error('录音失败:', err)
  }
})
// 停止录音
wx.stopRecord({
  success(res) {
    console.log('录音停止:', res)
  }
})

2.2 权限处理

必须在app.json中声明录音权限：

{
  "permission": {
    "scope.record": {
      "desc": "需要录音权限"
    }
  }
}

2.3 完整实现示例

// pages/voice/voice.vue
export default {
  data() {
    return {
      isRecording: false,
      tempFilePath: ''
    }
  },
  methods: {
    startRecord() {
      if (this.isRecording) return
      this.isRecording = true
      wx.startRecord({
        success: (res) => {
          this.tempFilePath = res.tempFilePath
          this.uploadVoice()
        },
        fail: (err) => {
          console.error('录音失败:', err)
          this.isRecording = false
        }
      })
    },
    stopRecord() {
      wx.stopRecord()
      this.isRecording = false
    },
    uploadVoice() {
      // 实现上传逻辑
    }
  }
}

三、H5端实现方案

3.1 WebRTC录音方案

H5端可通过MediaRecorder API实现：

function startRecording() {
  return new Promise((resolve, reject) => {
    navigator.mediaDevices.getUserMedia({ audio: true })
      .then(stream => {
        const mediaRecorder = new MediaRecorder(stream)
        const audioChunks = []
        mediaRecorder.ondataavailable = event => {
          audioChunks.push(event.data)
        }
        mediaRecorder.onstop = () => {
          const audioBlob = new Blob(audioChunks, { type: 'audio/wav' })
          resolve(audioBlob)
        }
        mediaRecorder.start()
        setTimeout(() => mediaRecorder.stop(), 5000) // 5秒录音
      })
      .catch(err => reject(err))
  })
}

3.2 兼容性处理

需要考虑不同浏览器的兼容性：

1. 检查MediaRecorder支持：

   if (!navigator.mediaDevices || !MediaRecorder) {
   // 降级处理或提示用户
   }

2. 格式兼容性：不同浏览器支持的音频格式可能不同

3.3 完整H5实现示例

// utils/voiceRecorder.js
export default {
  start() {
    return new Promise((resolve, reject) => {
      if (!navigator.mediaDevices) {
        reject(new Error('浏览器不支持录音'))
        return
      }
      navigator.mediaDevices.getUserMedia({ audio: true })
        .then(stream => {
          const mediaRecorder = new MediaRecorder(stream, {
            mimeType: 'audio/wav'
          })
          const chunks = []
          mediaRecorder.ondataavailable = e => chunks.push(e.data)
          mediaRecorder.onstop = () => {
            const blob = new Blob(chunks, { type: 'audio/wav' })
            resolve(blob)
          }
          mediaRecorder.start(100) // 100ms收集一次数据
          this.mediaRecorder = mediaRecorder
          this.stream = stream
        })
        .catch(err => reject(err))
    })
  },
  stop() {
    if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
      this.mediaRecorder.stop()
      this.mediaRecorder.stream.getTracks().forEach(track => track.stop())
    }
  }
}

四、uniapp跨平台封装方案

4.1 条件编译实现

使用uniapp的条件编译：

// #ifdef MP-WEIXIN
import wxRecorder from './wx-recorder'
// #endif
// #ifdef H5
import h5Recorder from './h5-recorder'
// #endif
export default {
  start() {
    // #ifdef MP-WEIXIN
    return wxRecorder.start()
    // #endif
    // #ifdef H5
    return h5Recorder.start()
    // #endif
  }
}

4.2 统一API设计

设计统一的录音接口：

export default {
  /**
   * 开始录音
   * @param {Object} options 配置选项
   * @param {Number} options.duration 录音时长(秒)
   * @param {String} options.format 音频格式
   * @returns {Promise} 返回录音文件Blob或临时路径
   */
  start(options) {
    // 平台实现...
  },
  /**
   * 停止录音
   * @returns {Promise} 返回录音结果
   */
  stop() {
    // 平台实现...
  }
}

4.3 完整跨平台实现示例

// utils/voice-recorder.js
const platform = uni.getSystemInfoSync().platform
let recorder = null
if (platform === 'mp-weixin') {
  recorder = {
    start(options) {
      return new Promise((resolve, reject) => {
        wx.startRecord({
          format: options.format || 'mp3',
          duration: options.duration || 60000,
          success: res => resolve(res.tempFilePath),
          fail: err => reject(err)
        })
      })
    },
    stop() {
      return wx.stopRecord()
    }
  }
} else if (platform === 'h5') {
  // 实现H5录音逻辑...
}
export default recorder

五、优化与扩展建议

5.1 性能优化

1. 录音数据分片处理，避免内存溢出
2. 实现录音进度回调
3. 压缩音频数据减少上传体积

5.2 功能扩展

1. 添加语音转文字功能（可集成第三方服务）
2. 实现语音播放功能
3. 添加录音音量可视化

5.3 错误处理最佳实践

async function recordVoice() {
  try {
    const filePath = await voiceRecorder.start({
      duration: 30000,
      format: 'mp3'
    })
    // 处理录音文件...
  } catch (error) {
    if (error.code === 'PERMISSION_DENIED') {
      uni.showModal({
        title: '权限错误',
        content: '需要录音权限才能使用此功能'
      })
    } else {
      console.error('录音失败:', error)
      uni.showToast({
        title: '录音失败',
        icon: 'none'
      })
    }
  }
}

六、总结与展望

uniapp实现跨平台语音输入功能需要充分考虑各平台的特性和限制。通过条件编译和统一API设计，可以创建出既保持平台特性又具备跨平台能力的语音输入组件。未来随着WebRTC标准的普及和浏览器兼容性的提升，H5端的语音输入实现将更加简单和稳定。

开发者在实际项目中应根据具体需求选择合适的实现方案，并注意处理各种边界情况和错误场景，以提供稳定可靠的语音输入功能。