录制 webaudio api 的音频上下文的声音 [英] Record sound of a webaudio api's audio context
问题描述
我在我的项目中使用网络音频 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 项目中完全运行并使用 相关源文件 看看我的完整代码是如何工作的.我想这仅与录制您自己以编程方式播放的 WebAudio 节点相关.
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 用作最终目的地.在本例中,我选择显示控件,以便用户可以轻松下载生成的文件.
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屋!