Why uploaded audio is corrupt when upload is clearly successful?

Question

I've made an upload using JavaScript, PHP and Cordova. Everything works fine. But when I try to open the uploaded mp3 in browser or a desktop player like Windows Media Player, it says the file is corrupt. Any idea why this is happening?

I also have to say that when I inspect the corrupted file in browser it has video tags instead of audio tags.

My code:

//method to upload the audio
function uploadAudio(recordedSrc) {
  var win = function(r) {
    console.log("Code = " + r.responseCode);
    console.log("Response = " + r.response);
    console.log("Sent = " + r.bytesSent);
  }

  var fail = function(error) {
    alert("An error has occurred: Code = " + error.code);
    console.log("upload error source " + error.source);
    console.log("upload error target " + error.target);
  }

  var options = new FileUploadOptions();
  options.fileKey = "file";
  options.fileName = "recordupload.mp3";
  options.mimeType = "audio/mpeg";
  console.log(options);

  var ft = new FileTransfer();
  console.log(ft);
  console.log(recordedSrc);
  ft.upload(recordedSrc, encodeURI(app_url + "json/upload.php"), win, fail, options);
}
$('.upload').on('click', function(e) {
  e.preventDefault();
  //Method to upload Audio file to server
  uploadAudio(mediaRecSrc);
});

Server side handling script in PHP:

<?php
// Where the file is going to be placed
$target_path = dirname(__FILE__) . "/uploaded_records/";
if (!file_exists($target_path)) {
    mkdir ($target_path, 0777);
}
/* Add the original filename to our target path.
Result is "uploads/filename.extension" */
$target_path = $target_path . basename( $_FILES['file']['name']);
$path = $_FILES['file']['name'];
$ext = pathinfo($path, PATHINFO_EXTENSION);
var_dump("ext is: " . $ext);

if(move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) {
    echo "The file ".  basename( $_FILES['file']['name']).
    " has been uploaded";
} else{
    echo "There was an error uploading the file, please try again!";
    echo "filename: " .  basename( $_FILES['file']['name']);
    echo "target_path: " .$target_path;
}
?>

UPDATE:

It seems that the problem lies within the file(which on android works playing). I copied the file through usb device and tried playing it and there is the same problem, the file won't play. I have to say that the file is recorded using the media plugin from cordova. Maybe this is the problem, right?

SECOND UPDATE:

I recorded and uploaded a file as an .amr format and converted it to .mp3 online here and the sound works. Any idea on how to resolve this problem?

Answer 1

It might be mp3 is encoded in a way the mp3 player doesn't understand. Some mp3 players only support audio encoded in a certain manner and won't support certain methods of encoding like variable bit rate, high bit rates (320kbps+) , or mp3's with DRM.
As an application developer, you are free to make use of any media codec that is available on any Android-powered device, including those provided by the Android platform and those that are device-specific. However, it is a best practice to use media encoding profiles that are device-agnostic, Android media formats.

How are you making the mp3 file in the first place ? I make 3gp audio files on android and they play fine in VLC Media Player.

Cordova on Android devices record audio in Adaptive Multi-Rate format. The specified file should end with a .amr extension. (this is NOT a choice, it is a fact).

// Record audio
// 
function recordAudio() {
    var src = "myrecording.amr";
    var mediaRec = new Media(src, onSuccess, onError);

    // Record audio
    mediaRec.startRecord();

    // Stop recording after 10 sec
    var recTime = 0;
    var recInterval = setInterval(function() {
        recTime = recTime + 1;
        setAudioPosition(recTime + " sec");
        if (recTime >= 10) {
            clearInterval(recInterval);
            mediaRec.stopRecord();
        }
    }, 1000);
}

AMR file is not one of the supported audio files that html5 audio tag supports. Please see this list for supported audio formats: html5 supported audio formats

File conversion see: convert

If you don't know what Cordova is, see my stackoverflow quick install guide:
Cordova quick install with links to a tutorial.

If you want android .wav output here is something interesting (android does not have a .wav codec !) (untested by me, but I know this kind of code, seems good).

Answer 2

It's likely you are uploading your files in ASCII instead of binary? I'm not great with PHP but to me it seems fairly likely you need to tell something it's a binary file rather than text. Probably something you can specify in your options.