录制 webaudio api 音频上下文的声音

Question

我在我的项目中使用网络音频 api。有没有办法记录发送到 webkitAudioContext.destination 的音频数据？.wav 文件正在我的浏览器中播放，因此应该有某种方法将该数据存储到 (.wav) 文件中。我知道这是可能的，但还没有找到任何解决方案:( recorder.js 可以帮助我，但到目前为止我发现它只是记录麦克风实时输入，是否可以在帮助下记录我的音频（.wav 文件） recorder.js 的吗？请帮忙

我正在使用此示例进行录制https://github.com/mattdiamond/Recorderjs

Answer 1

我已经成功通过纯 WebAudio 解决方案实现了这一点（不需要 Recorderjs）。您可以看到它在我的DiscJS项目中完全运行，并使用相关的源文件来查看我的完整代码是如何运行的。我想这仅与录制您以编程方式播放的 WebAudio 节点相关。

首先，您需要一个 HTML<audio>作为最终目标。在本例中，我选择显示控件，以便用户可以轻松下载结果文件。

<audio id='recording' controls='true'></audio>

现在来说说 Javascript 的魔力：

const CONTEXT = new AudioContext();
var recorder=false;
var recordingstream=false;

function startrecording(){
  recordingstream=CONTEXT.createMediaStreamDestination();
  recorder=new MediaRecorder(recordingstream.stream);
  recorder.start();
}

function stoprecording(){
  recorder.addEventListener('dataavailable',function(e){
    document.querySelector('#recording').src=URL.createObjectURL(e.data);
    recorder=false;
    recordingstream=false;
  });
  recorder.stop();
}

现在最后的粘合剂是，每当您播放音频源时，您还需要将其连接到录音流：

function play(source){
  let a=new Audio(source);
  let mediasource=CONTEXT.createMediaElementSource(a);
  mediasource.connect(CONTEXT.destination);//plays to default context (speakers)
  mediasource.connect(recordingstream);//connects also to MediaRecorder
  a.play();
}

这是一个相对原始的设置，运行良好（在 Firefox 52 和 Chrome 70 上测试）。有关更正确的实现，请参阅MDN 上的 MediaRecorder。