0

我正在使用带有区域插件的多个WaveSurfer将样本加载到数字仪器中。就性能而言，它工作得很好，但我试图让用户能够记录他们播放的内容并将其转换为 blob 或你有的东西。有没有办法在单个 AudioContext 中记录和保存实时播放的声音？到目前为止，我只能从非常简洁的麦克风捕获外部输入。

我正在考虑使用 WaveSurfer 的 MediaElement 回退和 captureStream() API，但是不幸的是，MediaElement 似乎抛出了一个错误，读到它无法查询未定义的选择器。

下面是初始化每个 WaveSurfer 的代码：

this.wavesurfer = WaveSurfer.create({
    container: this.wave_id,
    waveColor: 'black',
    progressColor: 'purple',
    pixelRatio: 1,
    plugins: [
      RegionPlugin.create()
  ]
  });

非常感谢！

更新：我只能通过创建缓冲区源、将其连接到 AudioContext 目标并将其连接到 MediaStreamDestination 来进行录制。但是我只能为每个单独的 WaveSurfer 执行此操作，并且当我尝试为 WaveSurfer 所锁定的全局 AudioContext 创建缓冲区时，它不会向流中返回任何声音。将不胜感激记录所有全局上下文输出的任何指针。

以下记录个别 WaveSurfer 输出：

//buffer source node passed to media stream from a single wavesurfer instance. instantiated in wavesurfer.jsx component
          this.bufferSource = this.wavesurfer.backend.ac.createBufferSource();
          this.bufferSource.buffer = this.wavesurfer.backend.buffer;
          this.bufferSource.connect(this.wavesurfer.backend.ac.destination);




//method called which records the output and loads a blob into a new 
//wavesurfer (created elsewhere on event emission)

        recordContext(context, source){

        const dest = context.createMediaStreamDestination();
        const mediaRecorder = new MediaRecorder(dest.stream);
        source.connect(dest)

        mediaRecorder.start();
        source.start()

         setTimeout(() => {
        mediaRecorder.stop();
        source.stop()
         }, 5000)


        mediaRecorder.ondataavailable = (evt) => {
         // push each chunk (blobs) in an array
         console.log('you have data')
         this.state.chunks.push(evt.data);
        };

        mediaRecorder.onstop = (evt) => {
         // Make blob and open it.
         let blob = new Blob(this.state.chunks, { 'type' : 'audio/ogg; codecs=opus' });
             console.log(blob) 
             let audioURL = window.URL.createObjectURL(blob);
        };

     }

更新 2：

我现在朝着正确的方向迈出了一步，将每个缓冲区合并为一个缓冲区并将其传递给 AudioContext，但是缺少实时元素，因为这只是连接静态缓冲区。当用户触发样本区域时，有没有办法从每个缓冲区实时捕获 PCM 流？

4

0 回答 0