uni-app 获取录音设备的声音实时流

发布于 1周前 作者 vueper 来自 Uni-App

uni-app 获取录音设备的声音实时流
作者能拓展一下插件的功能吗?希望插件能获取录音设备的音频流,类似于this.recorderManager = uni.getRecorderManager();

// 监听录音帧数据  
this.recorderManager.onFrameRecorded() 这个方法的回调函数,能在回调函数里实时接收音频流
1 回复

在uni-app中获取录音设备的声音实时流,可以利用 uni.getRecorderManager() API 来实现。这个 API 提供了录音功能,并且支持获取实时音频数据。以下是一个基本的代码示例,展示了如何获取录音设备的实时音频流,并将其转换为PCM格式的数据进行处理。

首先,确保你的项目已经配置了录音权限。在 manifest.json 中添加必要的权限配置,例如:

"mp-weixin": {
  "requiredPrivateInfos": ["recordAudio"]
}

然后,在你的页面或组件中,使用以下代码实现录音和实时音频流获取:

export default {
  data() {
    return {
      recorderManager: null,
      frames: [],  // 存储PCM数据帧
    };
  },
  onLoad() {
    this.initRecorder();
  },
  methods: {
    initRecorder() {
      this.recorderManager = uni.getRecorderManager();

      // 监听录音开始事件
      this.recorderManager.onStart(() => {
        console.log('Recorder started');
      });

      // 监听录音数据帧事件
      this.recorderManager.onFrameRecorded((res) => {
        // res.data 是 ArrayBuffer 类型,包含音频数据
        const pcmData = new Uint8Array(res.data);
        this.frames.push(...pcmData);  // 将数据帧添加到frames数组中

        // 这里可以处理实时音频数据,例如发送到服务器或进行本地处理
        console.log('Frame recorded:', pcmData);
      });

      // 监听录音停止事件
      this.recorderManager.onStop((res) => {
        console.log('Recorder stopped:', res);
        // 可以在这里处理停止后的数据,例如保存到文件
      });
    },
    startRecording() {
      this.frames = [];  // 清空之前的数据帧
      this.recorderManager.start({
        format: 'PCM',
        sampleRate: 44100,
        numberOfChannels: 1,
        encodeBitRate: 192000,
      });
    },
    stopRecording() {
      this.recorderManager.stop();
    },
  },
};

在上面的代码中,我们首先通过 uni.getRecorderManager() 获取录音管理器,然后设置了一系列事件监听器来处理录音的开始、数据帧录制和停止事件。onFrameRecorded 回调函数会在每录制一个数据帧时被调用,你可以在这里处理实时的PCM音频数据。

请注意,实时音频数据的处理可能涉及复杂的算法和性能优化,特别是在需要实时传输或处理的情况下。这只是一个基本的示例,展示了如何获取音频数据帧,具体的处理逻辑需要根据实际需求进行实现。

回到顶部