RecorderJS 通过 AJAX 上传记录的 blob

Question

我正在使用 Matt Diamond 的 recorder.js 来导航 HTML5 音频 API，并且觉得这个问题可能有一个明显的答案，但我找不到任何具体的文档。

问题：录制了一个wav文件后，如何通过ajax将那个wav发送到服务器？有什么建议吗？？？

Answer 1

以上两个解决方案都使用 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)

source | live demo

Answer 2

@jeff Skee 的 回答确实很有帮助，但一开始我无法理解，所以我用这个小 javascript 函数做了一些简单的事情。

功能参数
@blob : 发送到服务器的 Blob 文件
@url : 服务器端代码 url 例如上传.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 3

如果您有 blob，则需要将其转换为 url 并通过 ajax 调用运行该 url。

// 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 4

我还花了很多时间来尝试实现您在这里想要做的事情。只有在实现 FileReader 并调用 readAsDataURL() 将 blob 转换为数据后，我才能成功上传音频 blob 数据：表示文件数据的 URL（查看 MDN FileReader）。您还必须POST，而不是GET FormData。这是我的工作代码的范围 sn-p。享受吧！

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);
}