使用網絡音頻API將效果應用於錄制的音頻

Question

我正在使用Web音頻演示中的錄制語音演示。無論如何，我想在錄制完成后為獲得的音頻添加效果。 這是我的效果：

function createDelay() {
var delayNode = null;
if (window.location.search.substring(1) == "webkit")
    delayNode = audioContext.createDelay();
else
    delayNode = audioContext.createDelay();
delayNode.delayTime.value = parseFloat( document.getElementById("dtime").value );
dtime = delayNode;

var gainNode = audioContext.createGain();
gainNode.gain.value = parseFloat( document.getElementById("dregen").value );
dregen = gainNode;

gainNode.connect( delayNode );
delayNode.connect( gainNode );
delayNode.connect( wetGain );

return delayNode;
}

這是記錄節點連接到目的地的位置時我的成功函數：

function gotStream(stream) {
inputPoint = audioContext.createGain();

// Create an AudioNode from the stream.
realAudioInput = audioContext.createMediaStreamSource(stream);
audioInput = realAudioInput;
audioInput.connect(inputPoint);
analyserNode = audioContext.createAnalyser();
analyserNode.fftSize = 2048;
inputPoint.connect( analyserNode );

audioRecorder = new Recorder( inputPoint );

zeroGain = audioContext.createGain();
zeroGain.gain.value = 0.0;
inputPoint.connect( zeroGain );
zeroGain.connect( audioContext.destination );
updateAnalysers();
}

所以錄制后如何將效果連接到獲得的音頻文件？換句話說，如何在gotStream函數中連接濕增益？

我的問題似乎有點笨拙，但是我對javascript特別是網絡音頻非常陌生

Answer 1

好。 因此，演示創建了這樣的圖。

realAudioInput -> inputPoint -> audioRecorder -> recorderJSNode -> destination


                       ||    -> zeroGain -> destination


                       ||    -> analyserNode

因此，如果要將效果僅添加到錄制中，則必須將其插入到inputPoint和“ recorderJSNode”之間。

最好的方法就是遵循這些原則。

var delayNode = createDelay();
inputPoint.connect( delayNode );
audioRecorder = new Recorder( delayNode );

而不只是

audioRecorder = new Recorder( inputPoint );

因此您的圖形將如下所示。

realAudioInput -> inputPoint -> audioRecorder -> delayNode -> recorderJSNode -> destination


                       ||    -> zeroGain -> destination


                       ||    -> analyserNode

Answer 2

如果要在錄制后對音頻應用效果，則可以使用Web Audio API的Offline Context 。

//after the recording is finished

var offlineContext = new webkitOfflineAudioContext();
var source = offlineContext.createBufferSource();
source.buffer = buffer; //here you set the recording as the buffer
var delay = offlineContext.createDelay();
delay.delayTime.value = 0.2; // set the delay time
source.connect(delay);
delay.connect(offlineContext.destination);

//the success callback
offlineContext.onComplete = function(e){
    //it returns the rendered buffer
    var result = e.renderedBuffer;
};

offlineContext.startRendering(); // start the offline rendering process

由於您在問題中使用的是Recorder.js ，因此可以使用recorder.getBuffer方法將錄制的音頻作為Float32Array獲得。

但是，如果要實時記錄“濕”信號，則可以將Recorder的源設置為DelayNode而不是輸入或“干”信號。