一、技术背景与需求分析

随着语音交互场景的普及，开发者需要在uniapp中实现跨端音频处理能力。核心需求包括：

1. H5环境录音：在浏览器中采集音频数据
2. 多端兼容：同时支持App（iOS/Android）和小程序
3. 实时语音识别：将音频流转换为文字
4. 波形可视化：实时展示音频振幅变化

技术挑战在于不同平台的API差异和性能优化。H5环境需使用Web Audio API，而App端需要调用原生录音模块，小程序则有独立的录音接口。

二、H5录音实现方案

1. 基础录音功能

使用Web Audio API和MediaRecorder API实现：

// 获取音频流
const constraints = { audio: true, video: false };
navigator.mediaDevices.getUserMedia(constraints)
  .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' });
      // 处理音频Blob
    };
    mediaRecorder.start();
  });

2. 权限处理

• iOS Safari需在HTTPS环境下工作
• Android Chrome需处理权限拒绝后的恢复逻辑
• 小程序需在app.json中声明录音权限

3. 跨端兼容层

创建统一的录音接口：

class AudioRecorder {
  static start(options) {
    if (uni.canIUse('getRecorderManager')) {
      // 小程序实现
      const recorder = uni.getRecorderManager();
      recorder.onStart(() => {});
      recorder.onStop(res => {});
      recorder.start(options);
    } else if (uni.getSystemInfoSync().platform === 'android' || uni.getSystemInfoSync().platform === 'ios') {
      // App实现（需插件）
      const plugin = requireNativePlugin('audio-recorder');
      plugin.start();
    } else {
      // H5实现
      this.h5Start(options);
    }
  }
  static h5Start(options) {
    // 前文H5代码
  }
}

三、音频上传与存储

1. 分片上传优化

async function uploadAudio(blob) {
  const chunkSize = 1024 * 1024; // 1MB分片
  const totalSize = blob.size;
  let offset = 0;
  while (offset < totalSize) {
    const chunk = blob.slice(offset, offset + chunkSize);
    const formData = new FormData();
    formData.append('file', chunk);
    formData.append('chunkIndex', Math.floor(offset / chunkSize));
    formData.append('totalChunks', Math.ceil(totalSize / chunkSize));
    await uni.request({
      url: 'https://your-api.com/upload',
      method: 'POST',
      data: formData,
      header: { 'Content-Type': 'multipart/form-data' }
    });
    offset += chunkSize;
  }
}

2. 存储方案选择

• 云存储：阿里云OSS/腾讯云COS（需配置跨域）
• 小程序临时路径：wx.env.USER_DATA_PATH
• App本地存储：plus.io.resolveLocalFileSystemURL

四、实时语音识别实现

1. WebSocket流式传输

function startSpeechRecognition() {
  const socket = new WebSocket('wss://your-asr-api.com');
  const mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });
  mediaRecorder.ondataavailable = event => {
    if (socket.readyState === WebSocket.OPEN) {
      socket.send(event.data);
    }
  };
  socket.onmessage = event => {
    const result = JSON.parse(event.data);
    console.log('识别结果:', result.text);
  };
  mediaRecorder.start(100); // 100ms分片
}

2. 平台特定方案

• 小程序：使用wx.getRealtimeLogManager+自定义ASR服务
• App端：集成科大讯飞/腾讯云SDK
• H5备用方案：Web Speech API（仅限Chrome）

五、波形可视化实现

1. Web Audio API分析

function setupAudioVisualization(stream) {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const analyser = audioContext.createAnalyser();
  const source = audioContext.createMediaStreamSource(stream);
  source.connect(analyser);
  analyser.fftSize = 2048;
  const bufferLength = analyser.frequencyBinCount;
  const dataArray = new Uint8Array(bufferLength);
  function draw() {
    requestAnimationFrame(draw);
    analyser.getByteFrequencyData(dataArray);
    // 使用dataArray绘制波形
  }
  draw();
}

2. Canvas绘制优化

function renderWaveform(canvas, dataArray) {
  const ctx = canvas.getContext('2d');
  const width = canvas.width;
  const height = canvas.height;
  const barWidth = (width / dataArray.length) * 2.5;
  let x = 0;
  ctx.fillStyle = '#009688';
  ctx.clearRect(0, 0, width, height);
  for (let i = 0; i < dataArray.length; i++) {
    const barHeight = dataArray[i] / 128 * height;
    ctx.fillRect(x, height - barHeight, barWidth, barHeight);
    x += barWidth + 1;
  }
}

3. 性能优化策略

• 使用requestAnimationFrame实现动画
• 限制重绘频率（如每帧处理1/4数据）
• 对于App端，可使用原生组件提升性能

六、完整项目集成建议

1. 条件编译：使用#ifdef H5等预编译指令
2. 插件市场：优先选择uni-app官方插件

3. 错误处理：

   try {
   await AudioRecorder.start();
   } catch (error) {
   uni.showToast({
    title: `录音失败: ${error.message}`,
    icon: 'none'
   });
   }

4. 测试方案：

   • 真机调试（特别是iOS权限问题）
   • 弱网环境测试
   • 长时间录音稳定性测试

七、进阶功能扩展

1. 降噪处理：使用Web Audio API的ConvolverNode
2. 语音情绪分析：通过频谱特征识别
3. 离线识别：集成TensorFlow.js语音模型
4. 多声道支持：区分左右声道数据

八、常见问题解决方案

1. iOS录音空白：确保添加<uses-permission android:name="android.permission.RECORD_AUDIO" />
2. 小程序上传失败：检查request合法域名配置
3. H5波形卡顿：降低analyser.fftSize值
4. App端延迟高：使用原生录音模块替代JS实现

通过以上方案，开发者可以在uniapp生态中构建完整的跨端音频处理系统。实际开发中建议先实现H5基础功能，再通过条件编译逐步扩展App和小程序支持。对于商业项目，建议采用成熟的语音服务SDK以获得更好的识别准确率和稳定性。