Follow-up to this question: I'm writing javascript code and its companion php code that, among other things, uses recorderjs to record wav files through the browser and then sends them via POST to the server, which then saves the files. Since I'm using the same php script to save multiple files, I'm sending both the filename I want and the audio blob to the server.
The problem I'm having at the moment is that the information doesn't seem to be correctly sent to the server via POST. When I echo the contents of $_POST in php it echoes the filename but not the blob information. Therefore, I'm getting a file with the correct file name, but it's empty.
I need help on the browser side to POST the information correctly and on the server side to make sure the information is processed in a way that it will be a readable WAV file.
Here's the relevant javascript, inspired by this question:
function stopRecording(callback, AudioFormat) {
// Stop the recorder instance
recorder && recorder.stop();
console.log('Stopped recording.');
// Stop the getUserMedia Audio Stream !
// audio_stream.getAudioTracks()[0].stop();
// Use the Recorder Library to export the recorder Audio as a .wav file
// The callback providen in the stop recording method receives the blob
if(typeof(callback) == "function"){
recorder && recorder.exportWAV(function (blob) {
callback(blob);
recorder.clear();
}, (AudioFormat || "audio/wav"));
}
}
And the function call, taken out of context for easier reading:
stopRecording(function(AudioBLOB){
var reader = new FileReader();
// this function is triggered once a call to readAsDataURL returns
reader.onload = function(event){
var fd = {};
fd["filename"] = subjectID + itemnumber + ".wav";
fd["audiochunk"] = event.target.result;
$.ajax({
type: 'POST',
url: 'upload_wav.php',
data: fd,
processData: false,
contentType: false
}).done(function(data) {
// print the output from the upload_wav.php script
console.log(data);
});
};
// trigger the read from the reader...
reader.readAsDataURL(AudioBLOB);
}, "audio/wav");
And here's the important bits of upload_wav.php:
<?php
$target = "audio/";
$data = substr($_POST['audiochunk'], strpos($_POST['audiochunk'], ",") + 1);
// decode it
$decodedData = base64_decode($data);
$fname = $target . $filetag;
// write the data out to the file
$fp = fopen($fname, 'wb') or die ("Unable to open file for writing");
fwrite($fp, $decodedData);
fclose($fp);
?>
I'm not necessarily wedded to this solution of using a FileReader and then ajax. Other attempts like this one have ended up with correctly named empty files or files that seemed to be right but then didn't play in my media player. I just want something that works, and I'm butting up against my limited php knowledge and experience. Please help.
