RecorderJS, загружающий записанный blob через AJAX

Question

Я использую recorder.js Matt Diamond для навигации по аудио API HTML5, и, похоже, у этого вопроса есть очевидный ответ, но я не могу найти какую-либо конкретную документацию.

Вопрос: После записи wav-файла, как я могу отправить этот wav на сервер через ajax? Какие-либо предложения???

Answer 1

Если у вас есть blob, вам нужно будет превратить его в URL-адрес и запустить 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 в данные: URL-адрес, представляющий данные файла (проверьте MDN FileReader). Также вы должны 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); 
}