Sending audio data from JS to Python

Question

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;

Omnipotence

Looks like the default representation of a JavaScript objects. That means the content of your blob variable is not the binary data. How is blob set? – Kilter

Thanks for your comment. I updated my question with some additional info about the blob – Omnipotence

Answer 1

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);
}

Geller

Answer 2

Have you tried using FormData?

var form = new FormData();
form.append('file', BLOBDATA, FILENAME);

$.ajax({
  type: 'POST',
  url: 'ServerURL',
  data: form, // Our pretty new form
  cache: false,
  processData: false, // tell jQuery not to process the data
  contentType: false // tell jQuery not to set contentType
}).done(function(data) {
  console.log(data);
});

On the python end, you could check if the data's there by doing something like:

@app.route('/messages', methods=['POST'])
def api_message():
    app.logger.debug(request.files['file'].filename) 

Pearlpearla

I tried using FormData as well, but the result seems the same. When I try with your example I do get the file name, but how can I get the binary audio data without getting [object BlobEvent]? – Omnipotence

Musa is correct, I literally found the documentation on Blob construction when his answer popped up. You simply missed the .data part of your call. var chunks = []; mediaRecorder.ondataavailable = function(e) { chunks.push(e.data); } For more information on this, see: link – Pearlpearla

Answer 3

You can do it with the multipart file upload in javascript

export function uploadAudio(audioBlob) {
    let data = new FormData();
    data.append('file', audioBlob);
    return axios
        .post(`http://localhost:3030/audiorecog`, data, {
            headers: {
                'Content-Type': 'multipart/form-data',
            },
        })
        .then(res => {
            console.log(res)
            return res
        });
}

In Python, you can receive the blob and save it

@app.route('/audiorecog', methods = ['GET', 'POST'])
def audiorecog():
   if request.method == 'POST':
      print("Recieved Audio File")
      file = request.files['file']
      print('File from the POST request is: {}'.format(file))
      with open("audio.wav", "wb") as aud:
            aud_stream = file.read()
            aud.write(video_stream)
      return "Success"
   return 'Call from get'

Clerc