Question

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

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

Answer 1

在github上找到：var rec = new Recorder(source [, config])，其中source是一个音频节点。因此，您需要放入正确的节点。如果您使用.wav播放<audio>个文件，则可以将其发送到录像机：

<audio id="audio" src="" controls></audio>

var a = document.getElementById('audio');
var context = new webkitAudioContext();
var sourceNode = context.createMediaElementSource(a);
var rec = new Recorder(sourceNode);

Answer 2

我已经设法通过一个纯WebAudio解决方案来实现这一点（不需要Recorderjs）。您可以看到它在我的discJS项目中可以正常工作，并使用the relevant source file来查看我完整的代码如何工作。我想这仅与录制以编程方式播放自己的WebAudio节点有关。

首先，您需要HTML <audio>才能用作最终目的地。在这种情况下，我选择显示控件，以便用户可以轻松下载结果文件。

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

现在使用Javascript mojo：

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上测试）。有关更适当的实现，请参见MediaRecorder on MDN。

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

2 个答案: