读取POST请求中对Flask API的音频文件

Question

我正在使用ReactJS前端和Python Flask作为后端构建“吉他调谐器”应用。

这是应用程序到目前为止所做的：

1。 React应用程序（客户端）使用react库react-mic]录制音频

2。

发送录音通过。向Flask API提取POST请求，然后将其提取并作为响应发送回去。

问题：

发送的文件在屏幕快照中的表格上，该表格是一个列表，其中包含一个由Webm音频文件组成的Blob元素。

当我通过fetch函数发送webM

音频文件的blob文件时，它在Flask应用中显示为未定义，并且我不确定如何在Python中read blob / webm音频。

ReactJS中的POST函数：

 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应用程序（我尝试在其中读取文件的方式，无法正常工作。。：

]

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
[我看到here，在ReactJS中将Blob转换为Audio对象可能很聪明，但是我不确定这如何使Flask中的文件读取更加容易。 

关于如何执行此操作的任何想法？

我想用Python读取文件并进行快速傅立叶变换（numpy.fft.fft），以确定音频剪辑中的频率。

提前感谢！

UPDATE

我决定我想尝试使用另一个库MediaRecorder-录制音频，以便能够以WAV而不是webm的形式录制音频。我想我将在base64中编码WAV文件，以表格形式将其发送到Flask并使用wave library进行读取。

我正在使用ReactJS前端和Python Flask后端构建“吉他调谐器”应用程序。到目前为止，应用程序正在执行以下操作：1. React应用程序（客户端）使用react库来录制音频react -...

Answer 1

您可以通过从前端发送数据的一种方法是通过在React中对POST函数进行以下更改来发送记录的Blob，而不是整个对象。>

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