File APIのBlobをPOSTで送信したい

Question

###前提・実現したいこと
JavaScriptでマイク入力の音声をサーバ上に保存するプログラムを作っています。
具体的にはRecorderjsを使って音声を認識して、POSTでサーバに送信・保存したいと思っています。

サンプルプログラムを使ってとりあえず作成しているのですが、作成されたBlobをPOSTで送信する方法がわかりません。

とりあえず、サンプルプログラムを以下のようにしましたができませんでした。

【略】
  function createDownloadLink() {
    recorder && recorder.exportWAV(function(blob) {
      var url = URL.createObjectURL(blob);
      var li = document.createElement('li');
      var au = document.createElement('audio');
      var hf = document.createElement('a');
      
      /*ここから追加した部分*/
      var reader = new FileReader();
      reader.onload = function(e){
      	__log('POST!!');
      	
      	var fd = new FormData();
      	fd.append('fname', 'test.wav');
      	fd.append('data', reader.result);

      	$.ajax({
            type: 'POST',
            url: 'upload.php',
            dataType : "text",
            data: fd,
            processData: false,
            contentType: false
      	}).done(function(data) {
               console.log(data);
      	});
      };
      
      reader.readAsText(blob);
      /*ここまで追加した部分*/

      au.controls = true;
      au.src = url;
      hf.href = url;
      hf.download = new Date().toISOString() + '.wav';
      hf.innerHTML = hf.download;
      li.appendChild(au);
      li.appendChild(hf);
      recordingslist.appendChild(li);
    });
  }
  window.onload = function init() {
【略】

以上、よろしくお願いいたします。

Comments

[masaya_ohashi]

これ、一度FileReaderを通していることになにか意味はありますか？録音したデータはすでにexportWAVのコールバックにblobとして渡されているので、それをそのままFormDataに入れてPOSTすればよさそうですが…

[masaya_ohashi]

録音したデータをダウンロードできるリンクを作る処理と、録音したデータをPOSTする処理がごっちゃになっているように見えます。どちらか一方をやりたいのか、両方やりたいのかどちらでしょう？

Answer 1

バイナリをFormDataで送るにはBlobクラスでラップしてやる必要があります。

https://stackoverflow.com/questions/39218673/sending-formdata-with-a-binary-data-by-using-jquery-ajax

uploadFormData.append("data", new Blob([data], {type:"application/octet-stream"}));

https://developer.mozilla.org/ja/docs/Web/API/Blob

Comments

[masaya_ohashi]

えっ、これで解決でいいんですか？

[nexco]

すみません、上記のようにしました。
無事動きました。ありがとうございます。

Answer 2

【略】
    function createDownloadLink()
    {
        recorder && recorder.exportWAV(function(blob) {
            /*var url = URL.createObjectURL(blob);
            var li = document.createElement('li');
            var au = document.createElement('audio');
            var hf = document.createElement('a');*/
            
             /*ここから追加した部分*/
             _log('POST!!');
             
             var fd = new FormData();
             fd.append('fname', 'test.wav');
             fd.append("data", blob);

             $.ajax({
                 type: 'POST',
                 url: 'upload.php',
                 dataType : "text",
                 data: fd,
                 processData: false,
                 contentType: false
             }).done(function(data) {
                 console.log(data);
             });
             /*ここまで追加した部分*/
            
             /*au.controls = true;
             au.src = url;
             hf.href = url;
             hf.download = new Date().toISOString() + '.wav';
             //hf.download
             hf.innerHTML = hf.download;
             li.appendChild(au);
             li.appendChild(hf);
             recordingslist.appendChild(li);*/
         });
     }

    window.onload = function init()
【略】

Answer 3

【略】
    function createDownloadLink()
    {
        recorder && recorder.exportWAV(function(blob) {
            /*var url = URL.createObjectURL(blob);
            var li = document.createElement('li');
            var au = document.createElement('audio');
            var hf = document.createElement('a');*/
            
             /*ここから追加した部分*/
             _log('POST!!');
             
             var fd = new FormData();
             fd.append('fname', 'test.wav');
             fd.append("data", blob);

             $.ajax({
                 type: 'POST',
                 url: 'upload.php',
                 dataType : "text",
                 data: fd,
                 processData: false,
                 contentType: false
             }).done(function(data) {
                 console.log(data);
             });
             /*ここまで追加した部分*/
            
             /*au.controls = true;
             au.src = url;
             hf.href = url;
             hf.download = new Date().toISOString() + '.wav';
             //hf.download
             hf.innerHTML = hf.download;
             li.appendChild(au);
             li.appendChild(hf);
             recordingslist.appendChild(li);*/
         });
     }

    window.onload = function init()
【略】

Comments

[nexco]

多重投稿、上の投稿とまったく同じです。