сохранение аудио на flask серверной части

Question

Во внешнем интерфейсе у меня есть аудиоблок, который я пытаюсь отправить на сервер Flask, где мне нужно выполнить некоторую обработку звука. строка base64 в Flask. Затем в Flask я кодирую строку в base64 и пытаюсь сохранить ее в локальной файловой системе. Он сохраняется как файл webm, но, когда я пытаюсь воспроизвести звук, это 0 секунд, хотя строка base64 сохранена в файле.

Знаете ли вы, почему звук может не воспроизводиться должным образом? Как мне заставить звук правильно воспроизводиться на бэкэнде?

Frontend:

mediaRecorder.addEventListener("stop", () => {
      const audioBlob = new Blob(audioChunks, { 'type' : 'audio/webm'});
      const reader = new FileReader();
        reader.readAsDataURL(audioBlob);
        reader.onload = () => {
          const base64AudioMessage = reader.result.split(',')[1];
          console.log(reader.result)
          fetch("http://localhost:5000/api/audio", {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ message: base64AudioMessage })
          }).then(res => 
            {console.log(res)});
        }
    })

Backend:

@app.route('/api/audio', methods=['POST'])
def audio():
    content = request.get_json(silent=True)
    print(type(content["message"])) #This is type string
    ans = base64.b64encode(bytes(content["message"], 'utf-8'))
    print(type(ans)) #This is type bytes
    with open("audioToSave.webm", "wb") as fh:
        fh.write(base64.b64decode(ans))
    theAnswer = 'no'
    return theAnswer

Answer 1

Я не думаю, что вам следует загружать аудиофайл как base64, он будет на ~ 33% больше
отправить его как необработанные данные, если вы отправляете данные только без дополнительных метаданных, полей или json вместе с ним в противном случае используйте FormData

mediaRecorder.addEventListener("stop", () => {
  const audioBlob = new Blob(audioChunks, { 'type' : 'audio/webm'})
  fetch(url, { method: 'POST', body: audioBlob })
})

// or

mediaRecorder.addEventListener("stop", () => {
  const fd = new FormData()
  const audioBlob = new Blob(audioChunks, { 'type' : 'audio/webm'})
  fd.set('file', audioBlob, 'audioToSave.webm')
  fetch(url, { method: 'POST', body: fd })
})

, вы сэкономите память и ресурсы, избегая кодирования и декодирования обратно

Answer 2

К вашему сведению. Я разрабатываю этот код, еще не идеальный, я теряю некоторые аудиозаписи.

Frontend

function blogUpload(blob){
        var xhr=new XMLHttpRequest();
        xhr.onload=function(e) {
            if(this.readyState === 4) {
                console.log("Server returned: ",e.target.responseText);
            }
        };

        var fd=new FormData();
        fd.append("audio_data",blob, 'temp.wav');
        xhr.open("POST","uploader",true);  
        xhr.onprogress = function (e) {
        if (e.lengthComputable) {
            console.log(e.loaded+  " / " + e.total)
            }
        }

        xhr.onloadstart = function (e) {
            console.log("start")
        }

        xhr.onloadend = function (e) {
            console.log("end")
        }

        xhr.send(fd);
    }

Backend

    @app.route('/uploader', methods = ['GET', 'POST'])
        def upload_file():
        if request.method == 'POST':
            f = request.files['audio_data']
            f.save('audio.wav')
            f.flush()
            f.close()
        return 'file uploaded successfully'

Answer 3

После использования комментария Якуба Блахи я смог заставить его работать, изменив функцию python следующим образом:

@app.route('/api/audio', methods=['POST'])
def audio():
    content = request.get_json(silent=True)
    print(type(content["message"])) #This is type string
    ans = base64.b64decode(bytes(content["message"], 'utf-8'))
    print(type(ans)) #This is type bytes
    with open("audioToSave.webm", "wb") as fh:
        fh.write(ans)
    theAnswer = 'no'
    return theAnswer