title: Read audio file in a POST request to Flask API
body: <p>I am building a "guitar tuner" app with ReactJS for frontend and Python Flask as the backend.</p>
  
  <p>This is what the app does so far:</p>
  
  <p><strong>1.</strong> The React app (client side) records audio using react library <a href="https://www.npmjs.com/package/react-mic" rel="nofollow noreferrer">react-mic</a></p>
  
  <p><strong>2.</strong> Sends the recording via. a fetch POST request to to Flask API, which picks it up and send as response back.</p>
  
  <p><strong>PROBLEM:</strong> The file being sent is on the form in the screenshot, which is a list with one Blob element consisting of a webm audio file.</p>
  
  <p><a href="https://i.stack.imgur.com/XOzgM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XOzgM.png" alt="enter image description here"></a></p>
  
  <p>When I send this blob file of a <strong>webM</strong> audio file in the fetch function it comes out as undefined in the Flask app, and I am unsure about how to <em>read</em> the blob/webm audio in Python.</p>
  
  <p><strong>The POST function in ReactJS:</strong></p>
  
  <pre><code> uploadFile(file) {
          var form = new FormData();
          form.append('file',file)
          form.append('title',"Guitar recording")
          fetch('http://127.0.0.1:5000/audio_record', {
              // content-type header should not be specified!
              method: 'POST',
              body: form
          }).then(function (response){
              return (response.text())
          }).then(function(text){
              console.log(text) // The text the endpoint returns
          })
              .catch(error =&gt; console.log(error)
              );
      }
  </code></pre>
  
  <p><strong>Python flask app (where I try reading the file, does not work..):</strong></p>
  
  <pre><code>import audioread
  from flask import Flask, request #import main Flask class and request object
  from flask_cors import CORS
  import logging
  
  from pydub import AudioSegment
  from pydub.playback import play
  
  logging.basicConfig(level=logging.INFO)
  
  logger = logging.getLogger('HELLO WORLD')
  
  
  app = Flask(__name__) #create the Flask app
  
  CORS(app)
  
  @app.route('/')
  def landing():
      return 'Landing page'
  
  # Get the blob of type "audio/webm;codecs=opus"
  @app.route('/audio_record', methods=['POST'])
  def save_record():
  
      logger.info("welcome to upload`")
      # file = request.files['file']
      #filename = secure_filename(file.title)
  
      file = request.form['file']
  
      print('File from the POST request is: {}'.format(file))
      try: 
          read_audio_file(file[0])
          return "****** Audio Read ******"
      except: 
          print("In the except", file[0]) # Gets printed as undefined
          title = request.form['title']
          print(title) # Able to print title 
          return "Request received and responded"
          # app.logger.debug(request.files['file'].filename) 
  
  
  def read_audio_file(audio_from_post):
      print("Tring to read audio..")
      with audioread.audio_open(audio_from_post) as f:
          print(f.channels, f.samplerate, f.duration)
          for buf in f:
              print(buf)
  
  
  if __name__ == '__main__':
      app.run(debug=True, port=5000) #run app in debug mode on port 5000
  </code></pre>
  
  <p>I saw <a href="https://stackoverflow.com/questions/58113419/how-to-play-audio-from-blob-object-in-react">here</a> that it might be smart to convert the Blob to an Audio object in ReactJS, but I am not sure how that would make the reading of the file in Flask any easier. </p>
  
  <p>Any idea as to how I should do this?</p>
  
  <p>I want to read the file in Python and do a Fast Fourier Transform (numpy.fft.fft), to determine the frequencies in the audio clip.</p>
  
  <p>Thanks in advance!</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I decided that I wanted to try recording the audio with another library, MediaRecorder- to be able to record audio in WAV, not webm. I think I will encode the WAV file in base64, send it in a form to Flask and read it with the <a href="https://docs.python.org/3/library/wave.html" rel="nofollow noreferrer">wave library</a>.</p>