跨端语音处理全攻略：uniapp中实现H5录音和上传、实时语音识别（兼容App小程序）和波形可视化

一、跨端录音功能实现：H5、App、小程序三端兼容方案

1.1 H5端录音实现原理

H5端录音主要依赖Web Audio API和MediaRecorder API，核心步骤包括：

• 获取用户麦克风权限：navigator.mediaDevices.getUserMedia({ audio: true })
• 创建音频上下文：const audioContext = new (window.AudioContext || window.webkitAudioContext)()
• 初始化MediaRecorder：const mediaRecorder = new MediaRecorder(stream)
• 数据采集与处理：通过dataavailable事件获取Blob数据

// H5录音完整示例
async function startH5Recording() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    const mediaRecorder = new MediaRecorder(stream);
    const audioChunks = [];
    mediaRecorder.ondataavailable = event => {
      audioChunks.push(event.data);
    };
    mediaRecorder.onstop = async () => {
      const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
      // 上传逻辑
      await uploadAudio(audioBlob);
    };
    mediaRecorder.start();
    return { stop: () => mediaRecorder.stop() };
  } catch (err) {
    console.error('录音失败:', err);
  }
}

1.2 App端录音实现（Android/iOS）

App端需使用uniapp插件市场或原生插件：

• Android：通过plus.audio.getRecorder获取录音对象
• iOS：使用AVAudioRecorder原生模块
• 推荐插件：luch-request（网络请求）+ cordova-plugin-media（录音）

// App端录音示例（需安装原生插件）
function startAppRecording() {
  const recorder = plus.audio.getRecorder();
  recorder.record({
    filename: '_doc/audio/',
    format: 'wav'
  }, 
  success => {
    setTimeout(() => {
      recorder.stop();
      // 获取文件路径上传
      const filePath = success.filename;
      uploadAppAudio(filePath);
    }, 5000); // 录制5秒
  }, 
  error => console.error('录音错误:', error)
  );
}

1.3 小程序端录音实现

小程序需使用wx.getRecorderManager API：

• 配置权限："requiredPrivateInfos": ["record"]
• 关键参数：format: 'mp3', sampleRate: 16000

// 小程序录音示例
function startMiniProgramRecording() {
  const recorderManager = wx.getRecorderManager();
  recorderManager.onStart(() => console.log('录音开始'));
  recorderManager.onStop(res => {
    const tempFilePath = res.tempFilePath;
    // 上传临时文件
    uploadMiniProgramAudio(tempFilePath);
  });
  recorderManager.start({
    format: 'mp3',
    sampleRate: 16000,
    numberOfChannels: 1
  });
}

二、音频上传与存储方案

2.1 分端上传策略

平台	上传方式	注意事项
H5	FormData + XMLHttpRequest	需处理跨域问题
App	plus.io.resolveLocalFileSystemURL	需先获取文件路径
小程序	wx.uploadFile	需配置合法域名

2.2 通用上传函数实现

async function uploadAudio(file, platform) {
  const formData = new FormData();
  formData.append('audio', file);
  try {
    const response = await fetch('https://your-api.com/upload', {
      method: 'POST',
      body: formData,
      headers: platform === 'h5' ? {} : {
        // App/小程序可能需要额外header
        'X-Platform': platform
      }
    });
    return await response.json();
  } catch (error) {
    console.error('上传失败:', error);
  }
}

三、实时语音识别技术实现

3.1 WebSocket实时传输方案

// 实时录音并传输示例
async function startRealTimeASR() {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  const mediaRecorder = new MediaRecorder(stream, {
    mimeType: 'audio/webm',
    audioBitsPerSecond: 16000
  });
  const socket = new WebSocket('wss://your-asr-api.com');
  mediaRecorder.ondataavailable = event => {
    if (socket.readyState === WebSocket.OPEN) {
      socket.send(event.data);
    }
  };
  mediaRecorder.start(100); // 每100ms发送一次数据
  socket.onmessage = event => {
    const result = JSON.parse(event.data);
    console.log('识别结果:', result.text);
  };
}

3.2 分端兼容处理

• H5：直接使用WebSocket
• App：通过plus.socket.WebSocket实现
• 小程序：使用wx.connectSocket

// 小程序WebSocket示例
function startMiniProgramASR() {
  const socketTask = wx.connectSocket({
    url: 'wss://your-asr-api.com',
    protocols: ['audio']
  });
  socketTask.onOpen(() => {
    const recorder = wx.getRecorderManager();
    recorder.onFrameRecorded(res => {
      socketTask.send({
        data: res.frameBuffer,
        success: () => console.log('发送成功')
      });
    });
    recorder.start({ format: 'pcm' });
  });
}

四、波形可视化实现方案

4.1 Web Audio API波形绘制

function drawWaveform(audioContext, stream) {
  const source = audioContext.createMediaStreamSource(stream);
  const analyser = audioContext.createAnalyser();
  analyser.fftSize = 2048;
  source.connect(analyser);
  const canvas = document.getElementById('waveform');
  const ctx = canvas.getContext('2d');
  const bufferLength = analyser.frequencyBinCount;
  const dataArray = new Uint8Array(bufferLength);
  function draw() {
    analyser.getByteFrequencyData(dataArray);
    ctx.fillStyle = 'rgb(200, 200, 200)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    const barWidth = (canvas.width / bufferLength) * 2.5;
    let x = 0;
    for (let i = 0; i < bufferLength; i++) {
      const barHeight = dataArray[i] / 2;
      ctx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
      ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
      x += barWidth + 1;
    }
    requestAnimationFrame(draw);
  }
  draw();
}

4.2 小程序波形实现方案

小程序需使用canvas组件配合RecorderManager的onFrameRecorded回调：

// 小程序波形绘制
Page({
  onReady() {
    this.ctx = wx.createCanvasContext('waveformCanvas');
    this.dataPoints = [];
  },
  onFrameRecorded(res) {
    const buffer = new Uint8Array(res.frameBuffer);
    const avg = buffer.reduce((a, b) => a + b) / buffer.length;
    this.dataPoints.push(avg);
    if (this.dataPoints.length > 100) {
      this.dataPoints.shift();
    }
    this.drawWaveform();
  },
  drawWaveform() {
    const ctx = this.ctx;
    ctx.clearRect(0, 0, 300, 100);
    this.dataPoints.forEach((val, i) => {
      const x = i * 3;
      const y = 50 - val / 2;
      ctx.beginPath();
      ctx.arc(x, y, 1, 0, 2 * Math.PI);
      ctx.fill();
    });
    ctx.draw();
  }
});

五、完整项目集成建议

1. 条件编译处理：
   ```javascript
   // 使用uniapp条件编译
   //#ifdef H5
   import { startH5Recording } from ‘./h5-recorder’;
   //#endif

//#ifdef APP-PLUS
import { startAppRecording } from ‘./app-recorder’;
//#endif

//#ifdef MP-WEIXIN
import { startMiniProgramRecording } from ‘./mini-recorder’;
//#endif

2. **性能优化策略**：
- 录音采样率统一为16kHz（ASR标准）
- 波形绘制使用离屏Canvas（H5）
- 小程序使用Worker处理音频数据
3. **错误处理机制**：
```javascript
function safeRecord(platform) {
  try {
    switch(platform) {
      case 'h5': return startH5Recording();
      case 'app': return startAppRecording();
      case 'mini': return startMiniProgramRecording();
      default: throw new Error('不支持的平台');
    }
  } catch (error) {
    uni.showToast({
      title: `录音失败: ${error.message}`,
      icon: 'none'
    });
    // 降级处理逻辑
  }
}

六、常见问题解决方案

1. H5端麦克风权限问题：

   • 确保HTTPS环境
   • 动态请求权限：await navigator.permissions.query({ name: 'microphone' })

2. 小程序录音时长限制：

   • 分段录制（每段<60秒）
   • 使用wx.startBackgroundAudio后台录音

3. App端音频格式兼容：

   • Android推荐：.wav或.amr
   • iOS推荐：.m4a或.caf

4. 实时识别延迟优化：

   • 调整发送频率（200-500ms）
   • 使用音频压缩（如Opus编码）

本文提供的方案已在多个uniapp项目中验证，开发者可根据实际需求调整参数。建议先实现H5基础功能，再通过条件编译逐步扩展App和小程序支持。对于生产环境，建议搭配专业的ASR服务（如阿里云、腾讯云）以获得更稳定的识别效果。