Sending audio data from JS to Python
<p>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:</p>

<p><strong>JS:</strong> </p>

<pre><code>fetch(serverUrl, {
  method: "post",
  body: blob
});
</code></pre>

<p>Where blob is of the type <code>Blob {size: 5040, type: "audio/wav;"}</code></p>

<p><strong>Python:</strong> </p>

<pre><code>@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!"
</code></pre>

<p>The file gets saved but only contains shitloads of <code>[object BlobEvent]</code>. What am I doing wrong and how can I fix it?</p>

<p><strong>Edit:</strong> 
The audio samples are collected using <code>MediaRecorder()</code></p>

<pre><code>const mediaRecorder = new MediaRecorder(stream);
// Start
const chunks = [];
mediaRecorder.ondataavailable = e =&gt; {
    chunks.push(e);
}
// On stop
blob = new Blob(chunks, {'type': 'audio/wav;'});
</code></pre>

<p>I tried playing the audio again on the client side and it works just fine:</p>

<pre><code>const audio = document.createElement('audio');
const audioURL = window.URL.createObjectURL(blob);
audio.src = audioURL;
</code></pre>

<p>You are passing an array of event objects to the Blob constructor not the audio data.<br>
The data is <code>e.data</code>, so your code should be</p>

<pre><code>mediaRecorder.ondataavailable = e =&gt; {
    chunks.push(e.data);
}
</code></pre>

javascript python audio flask blob