hi i am using this JavaScript and it sends data correctly but the problem is temp file contains only this when i try to upload at server end
blob:https://sitename.com/03f06abe-6d00-4c4d-86bd-317db4bff616.wav
when i use php move_uploaded_file it writes the data to the given path but instead of real audio file it just writes the link of blob i want to upload the wav or mp3 file of recorded audio. i have got code from this link and seems everything is working except data is not audio its just blob link when we move_uploaded_file use
Record and upload audio in jquery and php
here is my jquery
jQuery(document).ready(function () {
var $ = jQuery;
var myRecorder = {
objects: {
context: null,
stream: null,
recorder: null
},
init: function () {
if (null === myRecorder.objects.context) {
myRecorder.objects.context = new (
window.AudioContext || window.webkitAudioContext
);
}
},
start: function () {
var options = {audio: true, video: false};
navigator.mediaDevices.getUserMedia(options).then(function (stream) {
myRecorder.objects.stream = stream;
myRecorder.objects.recorder = new Recorder(
myRecorder.objects.context.createMediaStreamSource(stream),
{numChannels: 1}
);
myRecorder.objects.recorder.record();
}).catch(function (err) {});
},
stop: function (listObject) {
if (null !== myRecorder.objects.stream) {
myRecorder.objects.stream.getAudioTracks()[0].stop();
}
if (null !== myRecorder.objects.recorder) {
myRecorder.objects.recorder.stop();
// Validate object
if (null !== listObject
&& 'object' === typeof listObject
&& listObject.length > 0) {
// Export the WAV file
myRecorder.objects.recorder.exportWAV(function (blob) {
var url = (window.URL || window.webkitURL)
.createObjectURL(blob);
// Prepare the playback
var audioObject = $('<audio controls></audio>')
.attr('src', url);
var link = url+'.wav';
$('#audio').attr('value',link);
var blob = new Blob([link], {type: 'audio/wav'});
var reader = new FileReader();
reader.onload = function () {
var b64 = reader.result.replace(/^data:.+;base64,/, '');
};
reader.readAsDataURL(blob);
var form_data = new FormData();
form_data.append('file', blob);
$.ajax({
url: "upload_recording1.php",
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function(data) {
}
});
});
}
}
}
};
});
my php is this
if(isset($_FILES['file']) and !$_FILES['file']['error']){
move_uploaded_file($_FILES['file']['tmp_name'], "saved_audio/11.wav");
}
================================= edit 1 , ajax inside reader.onload same issue
jQuery(document).ready(function () {
var $ = jQuery;
var myRecorder = {
objects: {
context: null,
stream: null,
recorder: null
},
init: function () {
if (null === myRecorder.objects.context) {
myRecorder.objects.context = new (
window.AudioContext || window.webkitAudioContext
);
}
},
start: function () {
var options = {audio: true, video: false};
navigator.mediaDevices.getUserMedia(options).then(function (stream) {
myRecorder.objects.stream = stream;
myRecorder.objects.recorder = new Recorder(
myRecorder.objects.context.createMediaStreamSource(stream),
{numChannels: 1}
);
myRecorder.objects.recorder.record();
}).catch(function (err) {});
},
stop: function (listObject) {
if (null !== myRecorder.objects.stream) {
myRecorder.objects.stream.getAudioTracks()[0].stop();
}
if (null !== myRecorder.objects.recorder) {
myRecorder.objects.recorder.stop();
// Validate object
if (null !== listObject
&& 'object' === typeof listObject
&& listObject.length > 0) {
// Export the WAV file
myRecorder.objects.recorder.exportWAV(function (blob) {
var url = (window.URL || window.webkitURL)
.createObjectURL(blob);
// Prepare the playback
var audioObject = $('<audio controls></audio>')
.attr('src', url);
var link = url+'.wav';
$('#audio').attr('value',link);
var blob = new Blob([link], {type: 'audio/wav'});
var reader = new FileReader();
reader.onload = function () {
var b64 = reader.result.replace(/^data:.+;base64,/, '');
var form_data = new FormData();
form_data.append('file', blob);
$.ajax({
url: "upload_recording1.php",
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function(data) {
}
});
};
reader.readAsDataURL(blob);
});
}
}
}
};
});