RecorderJS AJAX를 통해 기록 된 BLOB를 업로드 중

Question

Matt Diamond의 recorder.js를 사용하여 HTML5 오디오 API를 탐색하고 있는데이 질문에 분명히 답변이 있지만 특정 문서를 찾을 수 없습니다.

질문 : wav 파일을 녹음 한 후 어떻게 그 wav를 ajax를 통해 서버로 보낼 수 있습니까? 어떤 제안 ???

Answer 1

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 2

나는 또한 당신이 여기서하려고하는 것을 이루기 위해 많은 시간을 보냈다. FileReader를 구현하고 readAsDataURL()을 호출하여 blob을 파일의 데이터를 나타내는 data : URL (MDN FileReader 체크)로 변환 한 후에 만 ​​오디오 blob 데이터를 성공적으로 업로드 할 수있었습니다. 또한 POST이 아니라 GET 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); 
}