Adding reverb to audio makes it distorted and loud

Question

i made a website for a game to produce record and share music, some users asked if i could add a reverb option to toggle on/off the reverb (this to simulate being inside a cave), i googled up a bit and found about the webAudio api reverb with the convolver node. I honestly didn't understand much about it but i tried to make it work, in the end i made this:

const source = a_ctx.createBufferSource()
source.buffer = buf
source.playbackRate.value = pitchKey;
if(reverbToggled){
    let convolver = a_ctx.createConvolver();
    convolver.buffer = buf
    source.connect(convolver)
    convolver.connect(a_ctx.destination)
}else{
    source.connect(a_ctx.destination)
}
source.start(0)

the variable "buf" is the decoded audio file, it does seem to work but it's really loud and distorted, i have a demo here, to see the difference between on/off reverb, just press the "R" button on the right and then press the note buttons in the middle.

There is the probability i made some mistakes in the implementation of the convolverNode but i don't exactly know what causes it, how can i fix it?

Answer 1

A convolver can certainly be used for reverb, but the "buffer" you want to give should not be the same as the audio you're playing. It should instead be given a reverberation kernel (or impulse response), which may be precomputed or an actual recording. It corresponds to how a space reacts to an impulse of sound. You can probably find a suitable royalty free kernel online, never looked for one myself though.

More about convolution reverb on Wikipedia.