DEV Community

Masui Masanori
Masui Masanori

Posted on

[TypeScript] Play my own voice 4

Intro

This time, I will try "ConvolverNode" to use reverb.

Create the reverb effect

In the natural environment, the reverb effect is created by reverberation.
In digital audio, the reverb effect is created by superimposing environmental sounds(convolving).

main.page.ts

let gain: GainNode;
let lastGainValue = 1.0;
let audioContext: AudioContext;

export async function init(): Promise<void> {    
    const medias = await navigator.mediaDevices.getUserMedia({
        video: false,
        audio: true,
    });

    audioContext = new AudioContext();
    const audioSourceNode = audioContext.createMediaStreamSource(medias);

    gain = audioContext.createGain();
    gain.gain.value = 1.0;
    // Load environmental sounds
    const response = await fetch('https://mdn.github.io/voice-change-o-matic/audio/concert-crowd.ogg', {
        method: 'GET',
        mode: 'cors',
    });    
    const convolver = audioContext.createConvolver();
    const audioData = await response.arrayBuffer();
    const buffer = await audioContext.decodeAudioData(audioData);
    convolver.buffer = buffer;
    // (1)
    audioSourceNode.connect(convolver);
    convolver.connect(gain)
        .connect(audioContext.destination);
    // (2)
    // DO NOT connect "ConvolverNode" here
    audioSourceNode
        .connect(audioContext.destination);
}
Enter fullscreen mode Exit fullscreen mode

One important thing is I can't connect "ConvolverNode" at (2) or I will only be able to hear the environmental sounds.

Control the reverb effects

I can't control the reverb effects like the sound length, or sound type except "gain".
So I have to change the sound files.

In this time, I tried some other sound files from here.

Because "ConvolverNode" superimposes the sound files on the mic sound, if I use a song as the sound file, I can hear the song with my voice.

Resources

Discussion (0)