RecorderJS上传通过AJAX记录BLOB(RecorderJS uploading reco

我使用的是马特·戴蒙的recorder.js导航HTML5音频API，觉得这个问题可能有一个明显的答案，但我无法找到任何具体的文档。

问：录制WAV文件后，我怎么能说WAV通过AJAX发送到服务器？有什么建议？？？

Answer 1:

如果你有斑点，你需要把它变成一个URL和运行网址通过Ajax调用。

// might be nice to set up a boolean somewhere if you have a handler object
object = new Object();
object.sendToServer = true;

// You can create a callback and set it in the config object.
var config = {
   callback : myCallback
}

// in the callback, send the blob to the server if you set the property to true
function myCallback(blob){
   if( object.sendToServer ){

     // create an object url
     // Matt actually uses this line when he creates Recorder.forceDownload()
     var url = (window.URL || window.webkitURL).createObjectURL(blob);

     // create a new request and send it via the objectUrl
     var request = new XMLHttpRequest();
     request.open("GET", url, true);
     request.responseType = "blob";
     request.onload = function(){
       // send the blob somewhere else or handle it here
       // use request.response
     }
     request.send();
   }
}

// very important! run the following exportWAV method to trigger the callback
rec.exportWAV();

让我知道这是否正常工作..没有测试它，但它应该工作。干杯!

Answer 2:

我也花了很多时间试图实现你正试图在这里做。我只能够实现的FileReader和调用readAsDataURL（）将BLOB转换成数据后成功上载音频BLOB数据：URL表示文件的数据（检查MDN的FileReader ）。你还必须张贴， 拿不到 FORMDATA。下面是我的工作代码范围的片段。请享用！

function uploadAudioFromBlob(assetID, blob)
{
    var reader = new FileReader();

    // this is triggered once the blob is read and readAsDataURL returns
    reader.onload = function (event)
    {
        var formData = new FormData();
        formData.append('assetID', assetID);
        formData.append('audio', event.target.result);
        $.ajax({
            type: 'POST'
            , url: 'MyMvcController/MyUploadAudioMethod'
            , data: formData
            , processData: false
            , contentType: false
            , dataType: 'json'
            , cache: false
            , success: function (json)
            {
                if (json.Success)
                {
                    // do successful audio upload stuff
                }
                else
                {
                    // handle audio upload failure reported
                    // back from server (I have a json.Error.Msg)
                }
            }
            , error: function (jqXHR, textStatus, errorThrown)
            {
                alert('Error! '+ textStatus + ' - ' + errorThrown + '\n\n' + jqXHR.responseText);
                // handle audio upload failure
            }
        });
    }
    reader.readAsDataURL(blob);
}

Answer 3:

@jeff Skee的答案真的帮了，但我不能在第一次抓住它，所以我做了一些与这个小javascript函数简单。

功能参数
@blob：斑点文件发送给服务器
@url：服务器端代码的URL如upload.php的
@name：文件索引来在服务器侧文件数组引用

jQuery的AJAX功能

function sendToServer(blob,url,name='audio'){
var formData = new FormData();
    formData.append(name,blob);
    $.ajax({
      url:url,
      type:'post',      
      data: formData,
      contentType:false,
      processData:false,
      cache:false,
      success: function(data){
        console.log(data);
      }
    });  }

服务器端代码（upload.php的）

$input = $_FILES['audio']['tmp_name'];
$output = time().'.wav';
if(move_uploaded_file($input, $output))
    exit('Audio file Uploaded');

/*Display the file array if upload failed*/
exit(print_r($_FILES));

Answer 4:

以上使用jQuery和这两种解决方案$.ajax()

这里有一个原生XMLHttpRequest的解决方案。只是无论你有机会获得运行这段代码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("audio_data",blob, "filename");
xhr.open("POST","upload.php",true);
xhr.send(fd);

服务器端， upload.php是简单的：

$input = $_FILES['audio_data']['tmp_name']; //temporary name that PHP gave to the uploaded file
$output = $_FILES['audio_data']['name'].".wav"; //letting the client control the filename is a rather bad idea

//move the file from temp name to local folder using $output name
move_uploaded_file($input, $output)

源 | 现场演示

文章来源: RecorderJS uploading recorded blob via AJAX