uniapp中如何使用mediarecorder实现录音功能

在uniapp中使用MediaRecorder实现录音功能时遇到了问题，具体代码如下：

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();

在H5端可以正常录音，但在安卓和iOS端无法正常使用。请问：

  1. 在uniapp中应该如何正确使用MediaRecorder？
  2. 是否需要引入特定插件或进行额外配置？
  3. 有没有兼容多端的解决方案示例？

2 回复

在uniapp中，使用plus.audio.getRecorder()获取录音对象，然后调用start()和stop()方法即可实现录音功能。记得在manifest.json中配置录音权限。


在 UniApp 中使用 MediaRecorder 实现录音功能，需通过条件编译调用原生 API（如微信小程序或 H5 的接口）。以下是具体实现方法及示例代码：

1. 微信小程序环境

使用 wx.getRecorderManager() API：

// 创建录音管理器
const recorderManager = wx.getRecorderManager();

// 开始录音
recorderManager.start({
  duration: 60000, // 最长录音时间（ms）
  sampleRate: 44100, // 采样率
  numberOfChannels: 1, // 通道数
  encodeBitRate: 192000, // 编码码率
  format: 'aac' // 音频格式
});

// 监听录音结束事件
recorderManager.onStop((res) => {
  console.log('录音文件路径:', res.tempFilePath);
  // 此处可上传或处理录音文件
});

// 停止录音
recorderManager.stop();

2. H5 环境

使用浏览器原生的 MediaRecorder：

let mediaRecorder;
let audioChunks = [];

// 获取麦克风权限并开始录音
navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    mediaRecorder = new MediaRecorder(stream);
    
    mediaRecorder.ondataavailable = (event) => {
      audioChunks.push(event.data);
    };
    
    mediaRecorder.onstop = () => {
      const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
      const audioUrl = URL.createObjectURL(audioBlob);
      console.log('录音文件 URL:', audioUrl);
      // 此处可进行播放或上传
    };
    
    mediaRecorder.start();
  })
  .catch(err => {
    console.error('获取麦克风权限失败:', err);
  });

// 停止录音
mediaRecorder.stop();

3. 跨平台兼容处理

通过条件编译区分环境：

// #ifdef MP-WEIXIN
const recorderManager = wx.getRecorderManager();
// 微信小程序录音逻辑
// #endif

// #ifdef H5
// H5 环境录音逻辑
// #endif

注意事项：

  • 权限申请：H5 需用户授权麦克风；小程序需在 app.json 中声明 "requiredPrivateInfos": ["getRecorderManager"]。
  • 格式支持：不同平台支持的音频格式可能不同（如小程序推荐 AAC）。
  • 文件处理：录音文件为临时路径，需及时上传或保存。

以上代码提供了基础实现，实际使用时建议添加错误处理和用户交互提示。

回到顶部