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

【问题标题】：Saving WAV File Recorded in Chrome to Server将 Chrome 中录制的 WAV 文件保存到服务器
【发布时间】：2018-11-13 14:15:21
【问题描述】：

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

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

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

【问题讨论】：

与stackoverflow.com/questions/13658888/…重复，但尚未得到答复。
stackoverflow.com/questions/18951197/… 如果你正在使用 ASP MVC，请依赖这个

标签： php javascript ajax html5-audio

【解决方案1】：

上传 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 结束标记 ?> 之前）。

希望这会有所帮助。

【讨论】：

知道如何将上述内容应用于webaudiodemos.appspot.com/AudioRecorder/index.html 吗？他们编写代码的方式让我很困惑。
啊。太长，将另存为单独的答案。
我收到 PHP 错误 Undefined index: that_random_filename.wav 这在 blob 是 AudioBuffer 的情况下有效吗？
好吧，这不起作用，因为 PHP 应该是 $_FILES["that_random_filename_wav"] 因为在表单输入的名称中不允许使用句点。
我碰巧遇到了一个与您的问题相似的问题，无法解决：stackoverflow.com/questions/52196802/…。有什么想法吗？

【解决方案2】：

如果您只想破解该代码，最简单的方法是进入 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，让它进行编码，但那完全是“另一个蜡球”。

【讨论】：