Question

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

我正在考虑使用WaveSurfer的MediaElement后备和captureStream（）API，但是不幸的是，MediaElement似乎抛出了一个错误，因为它读取了未定义的querySelector。

这里是初始化每个WaveSurfer的代码：

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

非常感谢！

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

以下记录单个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流？

WebAudio / WaveSurfer：记录AudioContext输出？

0 个答案: