Live-recorded base64-encoded audio from MediaRecorder is broken

I wrote a simple page on js and php to live record audio from microphone. Logic is simple:

JS

1. Get chunk of data from mic;
2. Base64 encode it and urlencode it;
3. Send it via POST request;

PHP

4. Base64 decode data;
5. (re)Write to .ogg file;
6. Repeat 1 after delay.

The data is successfully written to file, but when I try to play it, player says that file is broken.

The blob solution from Mozilla guide is worked for me, I want exactly PHP solution with saving (rewriting) to file.

The full code below, what am I doing wrong?

<?php
if(isset($_POST["data"]))
{
file_put_contents("r.ogg", base64_decode($_POST["data"]));
exit;   
}
?>

<script>
var mediaRecorder = null;
let chunks = [];

if (navigator.mediaDevices &amp;&amp; navigator.mediaDevices.getUserMedia) {
   console.log('getUserMedia supported.');
   navigator.mediaDevices.getUserMedia (
      {
         audio: true
      })
      .then(function(stream) {
        mediaRecorder = new MediaRecorder(stream);
        mediaRecorder.start(2000);
        
        mediaRecorder.ondataavailable = function(e) {
            chunks.push(e.data);
            const blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
            chunks = [];
            var reader = new FileReader();
            reader.readAsDataURL(blob); 
            reader.onloadend = function() {
            var data = reader.result.split(";base64,")[1]; 
            requestp2("a.php", "data="+encodeURIComponent(data));
            }
}
      })
      .catch(function(err) {
         console.log('The following getUserMedia error occurred: ' + err);
      }
   );
} else {
   console.log('getUserMedia not supported on your browser!');
}

function requestp2(path, data)
{
var http = new XMLHttpRequest();
http.open('POST', path, true);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.send(data);
}
</script>