4

Matt Diamondのrecorder.jsを使用してHTML5オーディオAPIをナビゲートしており、この質問にはおそらく明らかな答えがあると感じていますが、特定のドキュメントを見つけることができません。

質問：wavファイルを録音した後、そのwavをajax経由でサーバーに送信するにはどうすればよいですか？助言がありますか？？？

4

4 に答える 4

5

ブロブがある場合は、それを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();

これが機能するかどうかを教えてください..まだテストしていませんが、機能するはずです。乾杯！

于 2013-02-22T14:39:01.930 に答える
2

私はまた、あなたがここでやろうとしていることを達成するために何時間も費やしました。FileReaderを実装し、readAsDataURL（）を呼び出してblobをデータに変換した後でのみオーディオblobデータを正常にアップロードできました：ファイルのデータを表すURL（MDN FileReaderを確認してください）。また、 FormDataを取得するのではなく、POSTする必要があります。これが私の作業コードのスコープスニペットです。楽しみ！

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);
}
于 2014-01-10T22:40:42.643 に答える
2

@jeff Skeeの答えは本当に役に立ちましたが、最初はそれを理解できなかったので、この小さなjavascript関数を使ってもっと簡単なものを作りました。

関数パラメーター
@blob：サーバーに送信するBlobファイル
@url：サーバー側のコードurl例：upload.php
@name：サーバー側のファイル配列で参照するファイルインデックス

jQueryajax関数 

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));
于 2018-07-05T02:54:50.740 に答える
0

上記の両方のソリューションは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)

ソース| ライブデモ

于 2018-07-12T13:03:58.113 に答える