Alright so I am building a website where you listen to an audio and can talk into it. The talking is being recorded as seem in the code.

navigator.mediaDevices.getUserMedia({ audio: true }).then(async (dryStream) => {
                let dryChunks = [];
                let wetChunks = [];

                const audioCtx = new AudioContext();

                // Creat Nodes
                const microphoneNode = audioCtx.createMediaStreamSource(dryStream);
                var bg_Element = document.getElementById('audio_bg');
                const bg_stream = bg_Element.captureStream();
                const bg_sourceNode = audioCtx.createMediaStreamSource(bg_stream);
                var dry_destNode = audioCtx.createMediaStreamDestination();
                var wet_destNode = audioCtx.createMediaStreamDestination();
                if (BRIR) {
                    var convolverNode = audioCtx.createConvolver();
                    convolverNode.buffer = await audioCtx.decodeAudioData(BRIR);
                }

                /// Create Graph ///
                // WET
                if (convolverNode) {
                    microphoneNode.connect(convolverNode).connect(wet_destNode);
                } else {
                    microphoneNode.connect(wet_destNode);
                }
                
                // DRY
                microphoneNode.connect(dry_destNode);

                /// Media Recorder ///
                // WET
                let wetStream = wet_destNode.stream;
                wetRecorder = new MediaRecorder(wetStream);
                wetRecorder.start();
                wetRecorder.ondataavailable = (e) => {
                    wetChunks.push(e.data);
                };

                // DRY
                dryStream = dry_destNode.stream;
                dryRecorder = new MediaRecorder(dryStream);
                if (BRIR) bg_Element.play(); // Gets started by page in Exercise 1
                dryRecorder.start();
                dryRecorder.ondataavailable = (e) => {
                    dryChunks.push(e.data);
                };

                dryRecorder.onstop = async (e) => {
                    console.log('Stop recording');
                    audioCtx.close();
                    const dryBlob = new Blob(dryChunks, { type: 'audio/mp3; codecs=opus' });
                    const wetBlob = wetChunks.length
                        ? new Blob(wetChunks, { type: 'audio/mp3; codecs=opus' })
                        : undefined;

After the recording is finished I want that the recorded part can be downloaded together with the audio which was played while we were recording. So that I have a mp3 file which is the whole thing together.

Basically I want to play audio and recorded at the same time as one thing.

So my initial plan was to make my audio, which is a wav file, into a blob aswell and then combine them. But it seems I am not even able to make a normal blob out of the Wav.

Before I tried it that way I had connected the nodes so It would record my voice and the audio at once but by doing that the audio sounded very metalic.