I want to send audio data from react in a interval of approx. 10sec to my flask backend. Here is my code, it is working but music format is not write.

React Code:

useEffect(() => {
    socket.connect();

    function sendData(data) {
      var form = new FormData();
      form.append("file", data, "data.mp3");
      form.append("title", "data.mp3");

      axios
        .post("http://127.0.0.1:5000/save-record", form, { headers })
        .then((response) => {
          console.log(response.data);
        })
        .catch((error) => {
          console.error(error);
        });
    }

    const audioHandler = () => {
      navigator.mediaDevices
        .getUserMedia({ audio: true, video: false })
        .then((stream) => {
          const mediaRecorder = new MediaRecorder(stream);
          var audioChunks = [];

          mediaRecorder.addEventListener("dataavailable", (event) => {
            audioChunks.push(event.data);
          });

          mediaRecorder.addEventListener("start", () => {
            console.log("MediaRecorder started");
          });

          mediaRecorder.addEventListener("stop", () => {
            console.log("MediaRecorder stopped");
          });

          mediaRecorder.start();

          const intervalId = setInterval(() => {
            if (mediaRecorder.state === "recording") {
              mediaRecorder.stop();

              if (audioChunks.length > 0) {
                const audioBlob = new Blob(audioChunks, { type: "audio/mpeg-3" });
                // const audioURL = URL.createObjectURL(audioBlob);
                // console.log(audioURL);
                audioChunks = [];
  
                // socket.emit("audioIn", { data: audioBlob });
                // console.log(audioBlob);
                sendData(audioBlob);
              }
            }else{
              mediaRecorder.start();
            }

            
          }, 10000);

          return () => {
            mediaRecorder.stop();
            clearInterval(intervalId);
          };
        })
        .catch((err) => {
          console.error("Err capturing audio.", err);
        });
    };

    socket.on("connect", audioHandler);

    return () => {
      socket.disconnect();
      socket.off("connect", audioHandler);
    };
  }, []);

Flask Code:

@app.route('/save-record', methods=['POST'])
@cross_origin()
def save_record():
    # check if the post request has the file part
    if 'file' not in request.files:
        flash('No file part')
        return redirect(request.url)
    file = request.files['file']
    # if user does not select file, browser also
    # submit an empty part without filename
    if file.filename == '':
        flash('No selected file')
        return redirect(request.url)
    file_name = str(uuid.uuid4()) + ".mp3"
    full_file_name = os.path.join("Data", file_name)
    try:
        file.save(full_file_name)
    except:
        print("error")

    return "success"

I am trying to save the audio data on disk. It is suppose to be 10 sec long, but this file dose not have any ending. audio image

Can somebody share how to do this properly? If possible implement using websockets.

Thanks in advance