Web Audio Api : 如何添加工作卷积器？

Question

我想学习/做的事情： 如何使用脉冲响应在我的代码沙箱中设置一个简单的工作卷积器（混响）。我以为这类似于设置过滤器，但事情似乎大不相同。

我的尝试： 与所有新技术一样，事物的变化速度很快，因此很难知道哪些实施是正确的，哪些不是。我查看了无数 WebAudio Api 卷积器教程，其中许多是旧的，其他的还在工作，但太过 "bloated" 使得很难理解正在发生的事情。我尝试实现 mozilla 文档中的一些示例：

我已经看过了：https://developer.mozilla.org/en-US/docs/Web/API/ConvolverNode/buffer

我的问题：如何在下面的上下文中正确集成卷积器？如您所见，我尝试了但无法解决这个问题。

 window.addEventListener('load', init, false);

function init() {
    setupWebAudio();
}

function setupWebAudio() {
    var audio = document.getElementById('music');
    var context = new AudioContext();
    var source = context.createMediaElementSource(audio);
    var filter = context.createBiquadFilter();
    var convolver = context.createConvolver();
    var inpulseRes = "hall.mp3";

    var hallBuffer = inpulseRes;
    soundSource = context.createBufferSource();
    soundSource.buffer = hallBuffer;
    convolver.buffer = hallBuffer;

    filter.type = 'lowpass';
    filter.frequency.value = 400;

var theParent = document.getElementById("test");
    theParent.addEventListener("mousedown", doSomething, false);
    function doSomething(e) {
        if (e.target !== e.currentTarget) {
            if(e.target == theParent.children[0]){
                filter.frequency.value += 200;
            }
            else if(e.target == theParent.children[1]){
                 filter.frequency.value -= 200;
            }
            else if(e.target == theParent.children[2]){
                 filter.type = 'highpass';
            }               
        }
        e.stopPropagation();
    }

    source.connect(filter);
    source.connect(convolver);
    filter.connect(context.destination);
    audio.play();
}

Answer 1

这是一个非常开放的问题；您尝试过哪些方法无效，或者您遗漏了 "impulse response" 应该是什么？如果是后者，请搜索 "impulse response files"，您会发现大量可以使用的免费文件。您还可以将对数衰减曲线上的噪声生成到缓冲区中，您将获得基本的混响效果。创建 impulseResponse 缓冲区的基本方法：

function impulseResponse( duration, decay, reverse ) {
    var sampleRate = audioContext.sampleRate;
    var length = sampleRate * duration;
    var impulse = audioContext.createBuffer(2, length, sampleRate);
    var impulseL = impulse.getChannelData(0);
    var impulseR = impulse.getChannelData(1);

    if (!decay)
        decay = 2.0;
    for (var i = 0; i < length; i++){
      var n = reverse ? length - i : i;
      impulseL[i] = (Math.random() * 2 - 1) * Math.pow(1 - n / length, decay);
      impulseR[i] = (Math.random() * 2 - 1) * Math.pow(1 - n / length, decay);
    }
    return impulse;
}

你的代码有一个 BufferSourceNode 和卷积器指向同一个缓冲区，这几乎肯定是错误的；您通常不会使用缓冲源播放脉冲响应文件，并且通常不会将普通声音文件用作脉冲响应。（如果脉冲响应的作用不清楚，请在维基百科上查找卷积。）您需要执行以下操作：

function setupWebAudio() {
    var audio = document.getElementById('music');
    var context = new AudioContext();
    var source = context.createMediaElementSource(audio);
    var convolver = context.createConvolver();
    var irRRequest = new XMLHttpRequest();
    irRRequest.open("GET", "hall.mp3", true);
    irRRequest.responseType = "arraybuffer";
    irRRequest.onload = function() {
        context.decodeAudioData( irRRequest.response, 
            function(buffer) { convolver.buffer = buffer; } );
    }
    irRRequest.send();
// note the above is async; when the buffer is loaded, it will take effect, but in the meantime, the sound will be unaffected.

    source.connect( convolver );
    convolver.connect( context.destination );
}

Answer 2

将卷积器的输出连接到某物。你现在拥有的是连接到卷积器的源，但卷积器没有连接到任何东西。作为第一次剪辑，convolver.connect(context.destination).

Web Audio Api : 如何添加工作卷积器？

Web Audio Api : How do I add a working convolver?

javascript

web-audio-api