13

What I am trying to learn / do: How to set up a simple working convolver (reverb) into my code sandbox below using an impulse response. I thought it was similar to setting a filter but things seem quite different.

What I tried: As with all new technologies things change at a fast pace making it difficult to know which implementation is correct and what is not. I looked at countless WebAudio Api Convolver Tutorials, many were old and others were working but far too "bloated" making it hard to understand what is going on. I tried to implement some of the examples from the mozilla documentation:

I already had a look at: https://developer.mozilla.org/en-US/docs/Web/API/ConvolverNode/buffer

My question: How do I integrate a convolver properly in the context below? As you can see I tried but cant figure this out.

 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();
}
2
  • how can you give out 150 rep if you only have 114?
    – dandavis
    Commented Jan 5, 2016 at 5:35
  • @dandavis good question
    – Asperger
    Commented Jan 6, 2016 at 8:16

2 Answers 2

12
+150

This is a pretty open-ended question; what have you tried that hasn't worked, or is the piece you're missing what the "impulse response" is supposed to be? If the latter, search for "impulse response files" and you'll find tons of free files you can use. You can also generate noise on a logarithmic decay curve into a buffer, and you'll get a basic reverb effect. Basic method to create an impulseResponse buffer:

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;
}

Your code has both a BufferSourceNode and the convolver pointing to the same buffer, which is almost certainly wrong; you don't usually play back an impulse response file using a buffersource, and you don't usually use a normal sound file as an impulse response. (Look up convolution on Wikipedia if the role of an impulse response isn't clear.) You need to do something like:

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 );
}
8
  • I will create a sample of what I tried. I will edit my question, hang on. I cant figure out how to use the convolver in this context (connecting it, syntax etc). The documentation wasnt very helpful, only for the filters. Anyways I will edit my code now.
    – Asperger
    Commented Dec 27, 2015 at 17:05
  • As you can see, the problem is connecting the convolver with the rest of my code.
    – Asperger
    Commented Dec 27, 2015 at 17:18
  • Please have a look at my edited code. You can see what I was attempting. It would be nice if you could guide me on how to use it properly in the given example. I really have a hard time getting my head to understand how it works.
    – Asperger
    Commented Dec 27, 2015 at 17:19
  • This is a perfect example. Looking at this is like reading a book. Thanks. If I wanted to add my filter too though or other effects is it allowed to use multiple source.connects? For example source.connect( convolver ) and source.connect( filter) or is there a more optimal way? Accepted answer and will give you a bounty of 200 points in 2 days : )
    – Asperger
    Commented Dec 28, 2015 at 0:11
  • Of course. You probably want to chain the effects serially. (I.e., connect your source to the filter, and connect the filter to the convolver.)
    – cwilso
    Commented Dec 28, 2015 at 14:57
5

Connect the output of the convolver to something. What you have now is the source connected to the convolver, but the convolver isn't connected to anything. As a first cut, convolver.connect(context.destination).

3
  • But is the rest correctly set? I didnt use any XMLhttprequests
    – Asperger
    Commented Dec 27, 2015 at 19:08
  • Failed to set the 'buffer' property on 'AudioBufferSourceNode': The provided value is not of type 'AudioBuffer. Honestly I would be grateful if you could show me how this is done as im more of a visual learner. This is really confusing. I did connect the convolver to the destination but I get this error now.
    – Asperger
    Commented Dec 27, 2015 at 19:11
  • 3
    Yeah, you need to use XMLhttprequest to get your hall.mp3 file loaded and use decodeAudio to convert the mp3 to a buffer source. Or use @cwilso's impulseResponse function to create an impulse response for testing that you have things set up the way you want. Commented Dec 28, 2015 at 5:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.