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

时间:2013-05-17 18:51:50

标签: php javascript ajax html5-audio

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

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

但是我需要能够将文件保存到我运行的Linux服务器上。它实际上是将blob记录的数据发送到服务器并将其保存为一个能够吸引我的.wav文件。我没有必要的PHP和/或AJAX知识,关于如何将blob保存到URL并按照我已经理解的方式处理Linux上的二进制文件,这使得保存.wav文件确实具有挑战性。我非常欢迎任何指示正确的方向。

2 个答案:

答案 0 :(得分:16)

客户端JavaScript函数上传WAV blob:

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

希望这有帮助。

答案 1 :(得分: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,并让它进行编码,但这是一个完整的'蜡球'。