JS + HTML5: Uploading an audio blob via HTML form

Question

I was wondering if I can create a HTML file input of an audio blob using javascript/jQuery. I'm audio recording online and want to POST the recording along with other HTML form inputs once the user presses form submit.

Edit: Elaborating, I have an audio blob stored in session cache. I also have a HTML form with text and file inputs that already hold values. I want to bind or incorporate the blob into the form so it will be POSTed when the HTML form is submitted.

I could create a formdata from the existing HTML form and append the blob as a key/value, but this seems "dirty." I'm going with this for now, but it would be great if someone knows how to incorporate/bind a cached blob with an existing HTML form.

Any help would be great, thanks!

binary large object of an audio file - [link](https://developer.mozilla.org/en-US/docs/Web/API/Blob) — user1909186, Feb 11 '14 at 20:35
Could you give me an example? I know it's possible to send the blob directly via a formdata but I would like to append it to a current form. — user1909186, Feb 11 '14 at 20:38
I've been working on this. You'd suggested something I hadn't tried so I wanted to understand what you meant by "you can send it has a byte array." — user1909186, Feb 11 '14 at 23:40

score 2 · Answer 1 · edited May 23 '17 at 12:30

2

all you have to do is convert you blob to an ArrayBuffer and post that, you can see how to convert the blob here:

How to go from Blob to ArrayBuffer

Note: You could also post it as a blob, but then your server would need to know how to handle it.

As far as sending the blob or ArrayBuffer, see this:

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data

Cheers, hope it helps.

edited May 23 '17 at 12:30

Community

1
1

answered Feb 11 '14 at 23:20

joseeight

904
7
10

Hi @joseeight thanks for the suggestion! I actually can handle the file, but I have a simpler question. Aside from the audio blob, I have a form of texts and files that are completely separate from the blob. I want to add the audio blob in cache (that was live recorded on the clientside) to the existing form of text and file inputs. I tried using js/jquery but I already know one can't set file input values. So, I was wondering if I had another option aside from rewriting my form to submit an ajax formdata request. By the way, the site is built on django. Any ideas? – user1909186 Feb 11 '14 at 23:46
Yes, you can use Form Data to rebuild your form and append the file, see this: https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects – joseeight Feb 11 '14 at 23:54
Yeah, that's what I did, but I wanted to avoid that. Oh well. Thanks! – user1909186 Feb 11 '14 at 23:56
2

I see, sorry, I don't think there's a simpler way than that :) – joseeight Feb 12 '14 at 00:08
Fair enough. I was stupid and had created an entirely different flow that has too many moving parts/dynamic inputs. Thanks! – user1909186 Feb 12 '14 at 00:28

score 1 · Answer 2 · answered Aug 20 '15 at 04:43

Here is one method to upload a blob (additionally, this uses ajaxForm and iframe set to true for reasons I won't go into but perhaps relevant to your situation).

        if (audioRecBlob) {
            var reader = new FileReader();
            reader.onload = function(event){
                $('#audioData').remove();
                var audioData = $('<input type="hidden" id="audioData" name="audioData">');
                audioData.val( event.target.result );
                $('#yourForm').append( audioData );

                realSubmit();
            };
            reader.readAsDataURL(audioRecBlob);
        } else {
            realSubmit();
        }

JS + HTML5: Uploading an audio blob via HTML form

2 Answers2