首页 > 解决方案 > 如何在 PHP 中将 MediaRecorder 流保存到 OGG 文件?包括元数据

问题描述

我正在使用 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 音频 - 进度条/播放栏不适用于 OGG 音频文件/206 部分内容问题

ogg 元数据为空

Length不见了。还有Bit rate,ChannelsAudio sample rate.

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

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

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

标签: javascriptphpogg

解决方案


我可能遗漏了一些明显的东西,但是 - 你不应该指定你希望Javascript 流是 OGG/Vorbis吗?

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

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

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

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


推荐阅读