当前位置：首页 > uni-app

uniapp录音转波形

2026-03-05 13:13:02uni-app

在 uniapp 中实现录音转波形功能，可以通过以下方法完成：

录音功能实现

使用 uni.getRecorderManager() API 进行录音管理。初始化录音管理器并设置相关参数：

const recorderManager = uni.getRecorderManager();
recorderManager.onStart(() => {
  console.log('录音开始');
});
recorderManager.onStop((res) => {
  console.log('录音停止', res.tempFilePath);
});

音频数据处理

获取录音文件后，需将音频数据转换为波形数据。可以通过 Web Audio API 或第三方库（如 wavesurfer.js）处理：

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const source = audioContext.createBufferSource();
fetch(res.tempFilePath)
  .then(response => response.arrayBuffer())
  .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
  .then(audioBuffer => {
    source.buffer = audioBuffer;
    const data = audioBuffer.getChannelData(0);
    // 处理波形数据
  });

波形绘制

使用 Canvas 绘制波形。将音频数据分段处理并绘制：

const canvas = document.getElementById('waveform');
const ctx = canvas.getContext('2d');
const width = canvas.width;
const height = canvas.height;
const step = Math.ceil(data.length / width);

ctx.clearRect(0, 0, width, height);
for (let i = 0; i < width; i++) {
  const min = 1.0;
  const max = -1.0;
  for (let j = 0; j < step; j++) {
    const datum = data[(i * step) + j];
    if (datum < min) min = datum;
    if (datum > max) max = datum;
  }
  ctx.fillRect(i, (1 + min) * height / 2, 1, Math.max(1, (max - min) * height / 2));
}

集成第三方库

使用 wavesurfer.js 简化波形绘制：

uniapp录音转波形

import WaveSurfer from 'wavesurfer.js';
const wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'violet',
  progressColor: 'purple'
});
wavesurfer.load(res.tempFilePath);