修复MediaRecorder实时录音至PHP保存文件损坏问题

const blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });

// ...
navigator.mediaDevices.getUserMedia ({ audio: true })
    .then(function(stream) {
        // 在这里定义 MediaRecorder 的选项
        const mrOptions = { mimeType: 'audio/ogg; codecs=opus' };
        mediaRecorder = new MediaRecorder(stream, mrOptions); // 将选项传递给构造函数
        mediaRecorder.start(2000); // 每2秒触发一次 ondataavailable 事件

        mediaRecorder.ondataavailable = function(e) {
            chunks.push(e.data);
            // 创建 Blob 时，可以引用 MediaRecorder 实际使用的 mimeType
            const blob = new Blob(chunks, { type : mediaRecorder.mimeType });
            chunks = []; // 清空 chunks，准备接收下一个数据块
            // ... 后续处理
        };
    })
// ...

<?php
if(isset($_POST["data"]))
{
    // 使用 FILE_APPEND 标志，将数据追加到文件末尾
    file_put_contents("r.ogg", base64_decode($_POST["data"]), FILE_APPEND);
    exit;
}
?>

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

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
   console.log('getUserMedia supported.');
   navigator.mediaDevices.getUserMedia (
      {
         audio: true
      })
      .then(function(stream) {
        // 1. 在 MediaRecorder 构造函数中指定媒体类型和编码器
        const mrOptions = { mimeType: 'audio/ogg; codecs=opus' };
        mediaRecorder = new MediaRecorder(stream, mrOptions);

        // 每2秒触发一次 ondataavailable 事件，发送数据块
        mediaRecorder.start(2000); 

        mediaRecorder.ondataavailable = function(e) {
            chunks.push(e.data);
            // 2. 创建 Blob 时，使用 MediaRecorder 实际的 mimeType
            const blob = new Blob(chunks, { type : mediaRecorder.mimeType });
            chunks = []; // 清空 chunks，准备接收下一个数据块

            var reader = new FileReader();
            reader.readAsDataURL(blob); 
            reader.onloadend = function() {
                var data = reader.result.split(";base64,")[1]; 
                requestp2("a.php", "data="+encodeURIComponent(data));
            }
        };

        // 可以添加停止录音的逻辑，例如：
        // setTimeout(() => {
        //     mediaRecorder.stop();
        //     console.log('Recording stopped.');
        // }, 10000); // 录制10秒后停止
      })
      .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>

<?php
if(isset($_POST["data"]))
{
    // 1. 解码 Base64 数据
    $decodedData = base64_decode($_POST["data"]);

    // 2. 将数据追加到文件末尾，而不是覆盖
    // 注意：首次写入时，如果文件不存在，file_put_contents 会创建它。
    // 每次后续写入都会追加。
    if ($decodedData !== false) {
        file_put_contents("r.ogg", $decodedData, FILE_APPEND);
    } else {
        error_log("Failed to decode base64 data.");
    }
    exit;   
}
?>