将 Chrome 中录制的 WAV 文件保存到服务器

IT技术 php javascript ajax html5-audio
2021-03-05 12:25:17

我在这里和其他地方看到了很多部分答案,但我是一个新手编码员,希望有一个彻底的解决方案。我已经能够在 Chrome Canary (v. 29.x) 中设置从笔记本电脑麦克风录制音频,并且可以使用 recorder.js 相对轻松地设置录制 .wav 文件并将其保存在本地,例如:

http://webaudiodemos.appspot.com/AudioRecorder/index.html

但是我需要能够将文件保存到我正在运行的 Linux 服务器上。这是将 blob 记录的数据实际发送到服务器并将其保存为 .wav 文件的过程,这让我很感兴趣。我没有必要的 PHP 和/或 AJAX 知识,关于如何将 blob 保存到 URL 以及如何处理 Linux 上的二进制文件,这使得保存 .wav 文件确实具有挑战性。我非常欢迎任何指向正确方向的指示。

2个回答

上传 WAV blob 的客户端 JavaScript 函数:

function upload(blob) {
  var xhr=new XMLHttpRequest();
  xhr.onload=function(e) {
      if(this.readyState === 4) {
          console.log("Server returned: ",e.target.responseText);
      }
  };
  var fd=new FormData();
  fd.append("that_random_filename.wav",blob);
  xhr.open("POST","<url>",true);
  xhr.send(fd);
}

PHP文件upload_wav.php

<?php
// get the temporary name that PHP gave to the uploaded file
$tmp_filename=$_FILES["that_random_filename.wav"]["tmp_name"];
// rename the temporary file (because PHP deletes the file as soon as it's done with it)
rename($tmp_filename,"/tmp/uploaded_audio.wav");
?>

之后你就可以播放文件了/tmp/uploaded_audio.wav

但要记住!/tmp/uploaded_audio.wav由用户创建www-data,并且(默认情况下 PHP)用户无法读取。要自动添加适当的权限,请附加该行

chmod("/tmp/uploaded_audio.wav",0755);

到 PHP 的结尾(在 PHP 结束标记之前?>)。

希望这可以帮助。

我正好是套牢appearently你类似的问题,并不能使它发挥作用:stackoverflow.com/questions/52196802/...任何的想法?
2021-04-20 12:25:17
好的,这不起作用,因为 PHP 应该是 $_FILES["that_random_filename_wav"] 因为表单输入的名称中不允许有句点。
2021-04-23 12:25:17
知道如何将上述内容应用于webaudiodemos.appspot.com/AudioRecorder/index.html吗?他们编写代码的方式让我很困惑。
2021-05-07 12:25:17
我收到 PHP 错误 Undefined index: that_random_filename.wav 这在 blob 是 AudioBuffer 的情况下有效吗?
2021-05-12 12:25:17
啊。太长,将另存为单独的答案。
2021-05-18 12:25:17

最简单的方法,如果你只是想破解那个代码,进入recorderWorker.js,然后把exportWAV()函数破解成这样:

function exportWAV(type){
    var bufferL = mergeBuffers(recBuffersL, recLength);
    var bufferR = mergeBuffers(recBuffersR, recLength);
    var interleaved = interleave(bufferL, bufferR);
    var dataview = encodeWAV(interleaved);
    var audioBlob = new Blob([dataview], { type: type });

    var xhr=new XMLHttpRequest();
    xhr.onload=function(e) {
        if(this.readyState === 4) {
            console.log("Server returned: ",e.target.responseText);
        }
    };
    var fd=new FormData();
    fd.append("that_random_filename.wav",audioBlob);
    xhr.open("POST","<url>",true);
    xhr.send(fd);
}

然后该方法将从工作线程内部保存到服务器,而不是将其推回主线程。(RecorderJS 中基于 Worker 的复杂机制是因为大型编码应该在线程外完成。)

真的,理想情况下,您今天只需使用 MediaRecorder,并让它进行编码,但这完全是“另一个蜡球”。