I'm trying to send a .wav audio file (blob) från JS to Python using Flask. I simply want to save the file on the Python end and be able to play it on my computer. Here is my try:
JS:
fetch(serverUrl, {
method: "post",
body: blob
});
Where blob is of the type Blob {size: 5040, type: "audio/wav;"}
Python:
@app.route('/messages', methods = ['POST'])
def api_message():
# Open file and write binary (blob) data
f = open('./file.wav', 'wb')
f.write(request.data)
f.close()
return "Binary message written!"
The file gets saved but only contains shitloads of [object BlobEvent]. What am I doing wrong and how can I fix it?
Edit:
The audio samples are collected using MediaRecorder()
const mediaRecorder = new MediaRecorder(stream);
// Start
const chunks = [];
mediaRecorder.ondataavailable = e => {
chunks.push(e);
}
// On stop
blob = new Blob(chunks, {'type': 'audio/wav;'});
I tried playing the audio again on the client side and it works just fine:
const audio = document.createElement('audio');
const audioURL = window.URL.createObjectURL(blob);
audio.src = audioURL;
You are passing an array of event objects to the Blob constructor not the audio data.
The data is e.data, so your code should be
mediaRecorder.ondataavailable = e => {
chunks.push(e.data);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With