WebAudio / WaveSurfer: Записать вывод аудиоконтекста?

Question

Я использую несколько WaveSurfers с плагином региона для загрузки сэмплов в цифровой инструмент. С точки зрения производительности, она прекрасно работает, но я пытаюсь дать пользователям возможность записывать то, что они играют, и конвертировать их в блоб или что-то еще. Есть ли способ записи и сохранения звуков, воспроизводимых в режиме реального времени, в пределах одного AudioContext? До сих пор я был в состоянии захватить только внешний вход с микрофона, который довольно аккуратно.

Я думал об использовании аварийного отката MediaElement WaveSurfer и API captureStream (), однако MediaElement, к сожалению, выдает ошибку, считая, что не может запрашивать Selector из undefined.

Вот код, который инициализирует каждый WaveSurfer:

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

Большое спасибо!

ОБНОВЛЕНИЕ: я могу записывать только путем создания источника буфера, подключения его к назначению AudioContext и подключения к MediaStreamDestination. Но я могу сделать это только для каждого отдельного WaveSurfer, и когда я пытаюсь создать буфер для глобального AudioContext, к которому привязывается WaveSurfers, он не возвращает звук в поток. Был бы признателен за любые указатели для записи всех выходных данных глобального контекста.

Следующие записи индивидуального вывода 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 в режиме реального времени из каждого буфера, когда пользователь запускает область выборки?