saving audio on flask backend

Question

On the frontend, I have an audio blob that I am trying to send to a Flask backend where I need to do some processing on the audio.

Currently, I am posting the audio as a base64 string to Flask. In Flask, I am then encoding the string into base64 and trying to save it into the local filesystem. It is being saved as a webm file, but, when I try to play the audio, it is 0 seconds even though the base64 string is saved to the file.

Do you know why the audio might not be playing properly? How can I get the audio to play properly on the backend?

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

After using Jakub Bláha's comment, I was able to get it to work by changing the python function as so:

@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

Answer 2

I don't think you should upload the audio file as base64, it will be ~33% larger
send it as raw data if you are only sending the data without any extra metadata, fields or json along with it otherwise use 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 })
})

you will save memory and resources avoiding encoding & decoding it back

Answer 3

FYI. I am developing this code, not perfect yet, I am losing some audio posts.

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'