Search code examples
phpjqueryajaxfiletransfer

Send a file (type audio) without input type="file" in ajax


I create a file at the client (record) and then I'd send it on my remote server. However I can not find how to do it without using an input file, I have the file path but when I need to send it by ajax is not detected in $ _FILES side PHP. If I create a blob it works but the file does not match the recording.

Is it possible?

[UPDATE 1]

The file is a audio/mpeg, this file is created after an audio recording, where I get the location and I can play it again. I need to recover without the user clicks on a file input

HTML

    <form   enctype="multipart/form-data" id="form_message" method="POST">
       <textarea name="message" id="message" value="" placeholder="Ecris quelque chose"></textarea>
       <input type="submit" style="display:none;" value="Valider"/>
   </form>

JS

fd = new FormData();
    fd.append('audiofile', 'filepath.mp3');
    // other data
function submit_form_message(fd){
        $.ajax({
            type: 'POST',
            url: "url",
            data: fd,
            processData: false,
            contentType: false,
            success: function(data){}
        });
}

PHP

if($_FILES['audiofile']['size'] !=0){
            if ($_FILES['audiofile']['error'] == 0){
                $extensions_valides = array('mp3' , 'wav');
                if(in_array($_POST['extension'],$extensions_valides)){
                    $tmp_name = $_FILES["audiofile"]["tmp_name"];
                    $name_file = $notId.".".$_POST['extension'];
                    move_uploaded_file($tmp_name, $_SERVER['DOCUMENT_ROOT']."/Bell/sound/".$name_file);
                }
            }
        }

Solution

  • Found this here, which I think may be your best bet: Using local file for Web Audio API in Javascript

    Step 1: create Base 64 sound font

    First I need to convert my mp3 to a Base64 encoded string and store it as JSON. I found a website that does this conversion for me here - http://www.mobilefish.com/services/base64/base64.php You may need to remove return characters using a text editor but for anyone that needs an example I found some piano tones here - https://raw.github.com/mudcube/MIDI.js/master/soundfont/acoustic_grand_piano-mp3.js Note that in order to work with my example you're need to remove the header part data:audio/mpeg;base64,

    Step 2: decode sound font to ArrayBuffer

    You could implement this yourself but I found an API that does this perfectly (why re-invent the wheel, right?) - https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js Resource taken from - here

    Step 3: Adding the rest of the code Fairly straightforward

    var cNote  = acoustic_grand_piano.C2;
    var byteArray = Base64Binary.decodeArrayBuffer(cNote); 
    var context = new webkitAudioContext();
    
    context.decodeAudioData(byteArray, function(buffer) {
        var source = context.createBufferSource(); // creates a sound source
        source.buffer = buffer;    
        source.connect(context.destination); // connect the source to the context's destination (the speakers)
        source.noteOn(0); 
    }, function(err) { console.log("err(decodeAudioData): "+err); });
    

    Since you're passing a String of Base64 content, you are not sending a raw file, and thus do not need to select a file. You can then decode the Base64 in PHP and write it to a new Audio file on the server.