[Python] Page refreshes on POST request

My js code records a voice clip, and then sends it to a local flask server to process it with a fetch POST request, however, the page refreshes both when the clip is sent, and again when it's processed completely, which I dont particularly care for, as it makes debugging among other things much harder.

Here is the function which records the audio:

recordButton.onmousedown = e => {

console.log('Recording...');
audioChunks = [];
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
rec = new MediaRecorder(stream);
rec.ondataavailable = e => {
audioChunks.push(e.data);
if (rec.state == "inactive") {
let blob = new Blob(audioChunks, { type: 'audio/mpeg-3' });
recordedAudio.src = URL.createObjectURL(blob);
inputAudio = recordedAudio.src
recordedAudio.controls = true;
sendData(blob);
}
}
rec.start();
});
};


And here is the function that sends it:

async function sendData(data) {

const formData = new FormData();

formData.append('audio', data);
console.log("audio appended")
fetch('http://127.0.0.1:5000/upload-audio', {
method: 'POST',
body: formData
})
.then(response => response.json())
console.log("audio downloaded")
.then(data => {
console.log(data.response);
// Download audio response file

console.log("audio downloaded")
})
.catch(error => {
console.error('Error:', error);
});

}



Can you please identify what the problem is?

Ive tried using things such as e.prevent default to no success.

Continue reading...