CODEWITHSUNDEEP
pythonreactjspostflaskwebm
meerkat
meerkat

Reputation: 1122

Read audio file in a POST request to Flask API

I am building a "guitar tuner" app with ReactJS for frontend and Python Flask as the backend.

This is what the app does so far:

1. The React app (client side) records audio using react library react-mic

2. Sends the recording via. a fetch POST request to to Flask API, which picks it up and send as response back.

PROBLEM: 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.

enter image description here

When I send this blob file of a webM audio file in the fetch function it comes out as undefined in the Flask app, and I am unsure about how to read the blob/webm audio in Python.

The POST function in ReactJS:

 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 => console.log(error)
            );
    }

Python flask app (where I try reading the file, does not work..):

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

I saw here 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.

Any idea as to how I should do this?

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.

Thanks in advance!

UPDATE

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 wave library.

Upvotes: 3

Views: 5992

Answers (1)

Saiprasad Balasubramanian
Saiprasad Balasubramanian

Reputation: 914

One way you could approach is by sending the data from the frontend is sending the blob of the recording instead of the whole object by making the following change to your POST function in React

form.append('file',file.blob)

Then, on the server-side, you could simply do the following

request.files['file'].filename

And then proceeding to save it by using the built-in save method for further processing. Documentation for request.files can be found here

Upvotes: 1

Related Questions