记录WebAudio API音频上下文的声音 [英] Record sound of a webaudio api's audio context

问题描述

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

I am using web audio api in my project. Is there a way to record the audio data that's being sent to webkitAudioContext.destination? .wav files are playing in my browser, so there should be some way to store that data into a (.wav) file . i know this is possible, but not yet find any solution :( recorder.js can help me, but upto now i found it is only recording the microphone live input, is it possible to record my audio(.wav files) with the help of recorder.js? plz help

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

i am using this sample for recording https://github.com/mattdiamond/Recorderjs

推荐答案

我已经设法通过纯WebAudio解决方案(无需Recorderjs)实现了这一目标.您可以看到它在我的 discJS 项目中可以正常使用，并使用

I have managed to achieve this through a pure WebAudio solution (no Recorderjs needed). You can see it working fully on my discJS project and use the relevant source file to see how my complete code is working. I imagine this is only relevant to recording WebAudio nodes that you are playing yourself programmatically.

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

First you will need an HTML <audio> to use as a final destination. In this case I choose to show the controls so that the user may easily download the resulting file.

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

现在使用Javascript mojo:

Now for the 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();
}

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

Now the final glue is that whenever you play an audio source, you also need to connect it to your recording stream:

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 .

This is a relatively primitive setup that works fine (tested on Firefox 52 and Chrome 70). For a more proper implementation, see MediaRecorder on MDN.

这篇关于记录WebAudio API音频上下文的声音的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！