Question

我正在尝试使用jQuery的$ .post方法将WebAudio API和Recorder.js生成的音频blob发送到我的Laravel控制器。这是我正在尝试的。

$('#save_oralessay_question_btn').click(function(e){

      var question_content = $('#question_text_area').val();
      var test_id_fr = parseInt($('#test_id_fr').val());
      var question_type = parseInt($('#question_type').val());
      var rubric_id_fr = $('#rubric_id_fr').val();

      var reader = new FileReader();

      reader.onload = function(event){
           var form_data = new FormData();
           form_data.append('audio_data', event.target.result);

           var result = $.post('../questions',
                 {
                  question_content:question_content, 
                  question_type:question_type,
                  test_id_fr:test_id_fr,
                  rubric_id_fr:rubric_id_fr,

                  audio_data:form_data,
                  processData: false,
                  contentType: false
                },function(data){
                var html = "<div class='row  col-md-4'><div class='col-md-offset-6'><i class='fa fa-check fa-5x' aria-hidden='true'></i></div></div>";

                  swal({   title: "Success!",   text: data,   type: "success",  timer:2000 },function(){
                    //location.reload();
                  });

                })
                .done(function(data){

                }).fail(function(xhr, status, error){
                  sweetAlert("Error!", error, "error");
                });

                };
         reader.readAsDataURL(audio_files[0]); //this contains the blob recorded

            });

这给了

未捕获的TypeError：非法调用

修改

这是audio_files所拥有的。

recorder && recorder.exportWAV(function(blob) {


    audio_files.push(blob);

    var url = URL.createObjectURL(blob);
    var li = document.createElement('li');
    var au = document.createElement('audio');
    var hf = document.createElement('a');

      //console.log(typeof(url));

      au.controls = true;
      au.src = url;
      au.autoplay=true;
      hf.href = url;
      hf.download = new Date().toISOString() + '.wav';
      hf.download = url +'.wav';
      li.appendChild(au);
      li.appendChild(hf);
      recordingslist.appendChild(li);
    });

编辑2

我尝试了另一种使用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",audio_files[0]);
fd.append('question_content', question_content);
fd.append('question_type', question_type);
xhr.open("POST","../questions",true);
xhr.send(fd);

控制器 在我可以获取像$request["audio_data"]这样的数据的控制器中。但是这会给出一个文件路径C:\wamp\tmp\phpxxx请分享如何使用这些数据。我已经看到了这条路径，但在相应的目录中没有像phpxxx这样的文件。

Answer 1

您发送了data URL而不是Blob;如果预期结果是FileReader POST或Blob对象，则无需File。您可以发送File对象本身，File继承自Blob

$('#save_oralessay_question_btn').click(function(e) {

  var question_content = $('#question_text_area').val();
  var test_id_fr = parseInt($('#test_id_fr').val());
  var question_type = parseInt($('#question_type').val());
  var rubric_id_fr = $('#rubric_id_fr').val();

  var result = $.post('../questions', {
      question_content: question_content,
      question_type: question_type,
      test_id_fr: test_id_fr,
      rubric_id_fr: rubric_id_fr,    
      audio_data: audio_files[0],
      processData: false,
      contentType: false
    }, function(data) {
      var html = "<div class='row  col-md-4'><div class='col-md-offset-6'><i class='fa fa-check fa-5x' aria-hidden='true'></i></div></div>";

      swal({
        title: "Success!",
        text: data,
        type: "success",
        timer: 2000
      }, function() {
        //location.reload();
      });

    })
    .done(function(data) {

    }).fail(function(xhr, status, error) {
      sweetAlert("Error!", error, "error");
    });

});

Answer 2

要通过request [“ audio_data”]访问音频，只需添加.read（）并将其存储在变量中

x=request["audio_data"].read()

将Audio Blob发送到服务器

2 个答案: