如何将MediaRecorder流保存到PHP中的OGG文件?包括元数据 [英] How to save MediaRecorder stream to OGG file in PHP? Including Metadata

问题描述

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

  navigator.mediaDevices.getUserMedia(media.gUM).then(_stream =>{流= _流;记录器=新的MediaRecorder(流);logger.ondataavailable = e =>{//将数据推送到块chunks.push(e.data);//录制已停止if(recorder.state =='无效'){blob =新的Blob(块，{type:media.type})；blob_url = URL.createObjectURL(blob);$('.rec_result_audio').attr({'src':blob_url});//将数据发送到服务器//将文件追加到要发送的对象上var filedata = new FormData();filedata.append('recfile'，blob，blob_url);//通过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'];//将文件扩展名添加到字符串$ _FILES ['recfile'] ['name'] = $ _FILES ['recfile'] ['name'].'.ogg';//保存到文件系统} 

现在，OGG文件(带有opus编解码器的webm)存储在服务器上.但是，所有元数据都丢失了.因此播放栏不起作用.请参阅此处以获取更多信息:

长度丢失.还有 Bit rate ， Channels 和 Audio sample rate .

显然，用PHP直接保存到文件系统是不够的.

PHP代码中缺少什么，以便以后将该文件识别为OGG文件?

我是否必须添加元数据，如果需要，如何添加元数据?

解决方案

我可能缺少明显的东西，但是-您不应该指定要

我可能会记错了，但是您得到的文件是

现在，OGG文件(带有opus编解码器的webm)存储在服务器上.但是，所有元数据都丢失了.

实际上不是OGG文件-它是WEBM文件.这样，像您所做的那样，给它一个 .ogg 扩展名而不是 .webm 扩展名，可能会使系统感到困惑，这就是为什么文件显示为无法读取和丢失元数据"的原因.

I am providing audio recording to my users within the browser, using 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
        }
    };
}

In PHP I get and store the stream like this:

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
}

Now the OGG file (webm with opus codec) is stored on the server. However, all the metadata is missing. And thus the playbar does not work. See here for more info: HTML5 Audio - Progressbar/Playbar is not working for OGG audio file / Issue with 206 Partial Content

Length is missing. Also the Bit rate, Channels and Audio sample rate.

Obviously the direct saving to the file system with PHP is not enough.

What is missing in the PHP code, so that the file is recognized as an OGG file later on?

Do I have to add metadata, and if so, how?

解决方案

I am probably missing something obvious, but - shouldn't you specify that you want the Javascript stream to be OGG/Vorbis?

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

I might be mistaken, but the file you get:

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

is not actually an OGG file -- it is a WEBM file. As such, giving it an .ogg extension instead of .webm, as you do, probably confuses the system, and that's why the file appears "unreadable and missing metadata".

这篇关于如何将MediaRecorder流保存到PHP中的OGG文件?包括元数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！