CODEWITHSUNDEEP
phpjqueryajaxfiletransfer
Xwalk company
Xwalk company

Reputation: 135

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);
                }
            }
        }

Upvotes: 1

Views: 1464

Answers (1)

Twisty
Twisty

Reputation: 30903

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.

Upvotes: 1

Related Questions