当前位置：首页 > uni-app

uniapp 音频

2026-03-26 15:09:32uni-app

uniapp 音频录制与播放实现方法

音频录制

在uniapp中实现音频录制可使用uni.startRecordAPI。调用该API后系统会请求麦克风权限，用户授权后即可开始录制。录制过程中可实时获取音频文件的临时路径。

录制完成后需调用uni.stopRecord停止录制，回调函数中返回的tempFilePath即为音频文件临时路径。注意临时文件可能被系统清理，应及时转存或上传。

uni.startRecord({
  success: function(res) {
    console.log('录音文件路径:', res.tempFilePath);
  }
});

// 停止录音
uni.stopRecord();

音频播放

使用uni.createInnerAudioContext创建音频上下文对象。设置src属性为音频文件路径后，调用play方法即可播放。支持网络URL和本地文件路径。

音频对象提供play/pause/stop等控制方法，以及onTimeUpdate等事件监听。建议在页面卸载时调用destroy方法释放资源。

const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.src = 'https://example.com/audio.mp3';
innerAudioContext.play();

// 暂停播放
innerAudioContext.pause();

// 停止播放
innerAudioContext.stop();

音频文件处理

通过uni.uploadFile可将录制的音频上传至服务器。需要指定文件路径、文件名和服务器接口地址。上传进度可通过onProgressUpdate回调监控。

下载网络音频使用uni.downloadFile，成功回调返回文件临时路径。注意检查文件格式兼容性，常见支持格式包括MP3、AAC等。

uni.uploadFile({
  url: 'https://example.com/upload',
  filePath: tempFilePath,
  name: 'audio',
  success: function(res) {
    console.log('上传成功', res.data);
  }
});

权限与兼容性

Android平台需在manifest.json中声明录音权限。iOS需确保应用有麦克风使用描述。真机测试时可能遇到权限弹窗，需引导用户授权。

不同平台对音频格式的支持存在差异，建议优先使用MP3格式。长时间录制需注意内存管理，可分段录制或压缩音频质量。

音频可视化

通过uni.createCanvasContext绘制波形图。结合onTimeUpdate事件获取当前播放时间，可实现进度条同步。高级可视化需使用WebAudio API等专业技术方案。

const ctx = uni.createCanvasContext('myCanvas');
innerAudioContext.onTimeUpdate(() => {
  const progress = innerAudioContext.currentTime / innerAudioContext.duration;
  ctx.drawWaveform(progress); // 自定义绘制方法
});