uniapp录音转波形
uniapp 录音转波形实现方法
使用 uni.getRecorderManager 录音
在 uniapp 中通过 uni.getRecorderManager API 获取录音管理器实例，配置录音参数并开始录音。录音完成后获取临时文件路径。
const recorderManager = uni.getRecorderManager();
recorderManager.start({
format: 'mp3',
sampleRate: 44100,
numberOfChannels: 1
});
recorderManager.onStop((res) => {
const tempFilePath = res.tempFilePath;
// 处理录音文件
});通过 Web Audio API 解析音频数据
将录音文件转换为 ArrayBuffer，使用 Web Audio API 解码音频数据并获取波形数据。需注意浏览器兼容性。
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const fileReader = new FileReader();
fileReader.onload = function(e) {
audioContext.decodeAudioData(e.target.result).then((buffer) => {
const channelData = buffer.getChannelData(0);
// 提取波形数据
});
};
fileReader.readAsArrayBuffer(tempFile);使用 Canvas 绘制波形图
获取音频数据后，通过 Canvas 绘制波形可视化效果。可根据采样率对数据进行降采样处理以提高性能。
const canvas = document.getElementById('waveform');
const ctx = canvas.getContext('2d');
const step = Math.ceil(channelData.length / canvas.width);
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < canvas.width; i++) {
const min = 1.0;
const max = -1.0;
for (let j = 0; j < step; j++) {
const datum = channelData[(i * step) + j];
min = Math.min(min, datum);
max = Math.max(max, datum);
}
ctx.fillRect(i, (1 + min) * canvas.height / 2, 1, Math.max(1, (max - min) * canvas.height / 2));
}使用第三方库简化实现
考虑使用现成的音频处理库如 wavesurfer.js 简化开发流程。需在 uni-app 项目中引入对应库。
import WaveSurfer from 'wavesurfer.js';
const wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple'
});
wavesurfer.load(tempFilePath);注意事项
- 真机调试时需要确认录音权限已获取
- iOS 平台对自动播放有限制，需要用户交互触发
- 大音频文件处理可能导致性能问题，建议分片处理
- 微信小程序环境与 H5 环境的 API 存在差异需做兼容处理
扩展功能实现
实时波形显示
通过 RecorderManager 的 onFrameRecorded 事件实现实时波形更新，需要注意性能优化。
recorderManager.onFrameRecorded((res) => {
const { frameBuffer } = res;
// 处理实时帧数据更新UI
});波形交互功能
为 Canvas 添加事件监听实现点击跳转、区域选择等交互功能，提升用户体验。
canvas.addEventListener('click', (e) => {
const percent = e.offsetX / canvas.width;
// 跳转到对应音频位置
});多平台兼容方案
针对不同平台使用条件编译实现差异化处理，保证各端功能正常。
// #ifdef H5
// Web Audio API 实现
// #endif
// #ifdef MP-WEIXIN
// 小程序专用API
// #endif
