7

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

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

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

4

2 回答 2

16

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

希望这可以帮助。

于 2013-05-17T19:28:53.680 回答
3

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

于 2017-10-09T23:07:58.470 回答