javascript - 如何在 PHP 中将 MediaRecorder 流保存到 OGG 文件？包括元数据

Question

我正在使用 Javascript 在浏览器中向我的用户提供录音:

navigator.mediaDevices.getUserMedia(media.gUM).then(_stream => 
{
    stream = _stream;
    recorder = new MediaRecorder(stream);

    recorder.ondataavailable = e => 
    {
        // push data to chunks
        chunks.push(e.data);

        // recording has been stopped
        if(recorder.state == 'inactive') 
        {
            blob = new Blob(chunks, {type: media.type });
            blob_url = URL.createObjectURL(blob);
            
            $('.rec_result_audio').attr({
                'src': blob_url
            });
            
            // send data to server
            // append file to object to be sent
            var filedata = new FormData();
            filedata.append('recfile', blob, blob_url);

            // send by AJAX/POST
        }
    };
}

在 PHP 中，我像这样获取并存储流:

if(!empty($_FILES)) 
{
    $filename = $_FILES['recfile']['name'];
    $file_locationtmp = $_FILES['recfile']['tmp_name'];
    $filetype = $_FILES['recfile']['type'];
    $filesize_bytes = $_FILES['recfile']['size'];
    
    // add file extension to string
    $_FILES['recfile']['name'] = $_FILES['recfile']['name'].'.ogg';

    // save to filesystem
}

现在 OGG 文件(带有 opus 编解码器的 webm)存储在服务器上。但是，所有元数据都丢失了。因此播放栏不起作用。更多信息请看这里: HTML5 Audio - Progressbar/Playbar is not working for OGG audio file / Issue with 206 Partial Content
Length不见了。还有 Bit rate , Channels和 Audio sample rate .
显然用 PHP 直接保存到文件系统是不够的。
PHP 代码中缺少什么，以便稍后将该文件识别为 OGG 文件？
我是否必须添加元数据，如果需要，如何添加？

Answer 1

我可能遗漏了一些明显的东西，但是 - 你不应该指定你想要 the Javascript stream to be OGG/Vorbis ?

recorder = new MediaRecorder(stream, { mimeType: "audio/ogg; codecs=vorbis" });

我可能弄错了，但你得到的文件:

Now the OGG file (webm with opus codec) is stored on the server. However, all the metadata is missing.

实际上不是 OGG 文件——它是一个 WEBM 文件。因此，给它一个 .ogg扩展名而不是 .webm ，正如您所做的那样，可能会使系统感到困惑，这就是文件出现“不可读且缺少元数据”的原因。