私はhttps://github.com/cwilso/AudioRecorderを使用していますが、ブロブを取得してサーバーに送信する以外はすべて正常に動作します。フォームデータをサーバーに送信する次のものがあります。基本的に、クライアント側で wav ファイルが生成され、それが blob に保存されます。その blob の内容を取得する方法を見つけたいと思います。
$('#submit').click(function(){
var formData = new FormData($('#add_slide').get(0));
var jContent = $( "#main_container" );
//console.log(formData);
if($('#audio_file').val().length==0)
{
var blob_url = $('#blob_url').val();
if($('#blob_url').val().length==0)
{
alert('Recording Could not be found. Please try again');
return false;
}else{
console.log(formData);
}
//return false;
}else{
var ext = $('#audio_file').val().split('.').pop().toLowerCase();
if(ext!== 'wav') {
alert('Invalid File. Please use a file with extension WAV!');
return false;
}
}
$.ajax({
url: 'lec_add_slide.php', //server script to process data
type: 'POST',
xhr: function() { // custom xhr
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ // check if upload property exists
myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
//console.log('OK');
}else{
//console.log('NOT');
}
return myXhr;
},
//Ajax events
beforeSend: function (){
$('#loadingModal').modal('show');
},
success: function (data) {
jContent.html( data );
$('#loadingModal').modal('hide');
},
error: function (){
console.log('error');
},
// Form data
data: formData,
//Options to tell JQuery not to process data or worry about content-type
cache: false,
contentType: false,
processData: false
});
});
function progressHandlingFunction(e){
if(e.lengthComputable){
$('#bar-progress-mp3').css('width',((e.loaded/e.total)*100)+'%');
}
}
通常のファイル入力を使用して通常のファイルを送信すると、すべてが完全に機能します。非表示の入力フィールドに BLOB の URL を入力し、blob.slice() も試しましたが、サーバーに到達するのはオブジェクト Blob だけです。blob URL のコンテンツを取得してサーバーに送信する方法を知っている人はいますか?
どんな助けでも感謝します。