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!

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
– user1909186, Commented Feb 11, 2014 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
– user1909186, Commented Feb 11, 2014 at 23:40

Community · Accepted Answer · 2017-05-23 12:30:56Z

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, 2017 at 12:30

CommunityBot

11 silver badge

answered Feb 11, 2014 at 23:20

joseeight

9247 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user1909186 Over a year ago

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?

joseeight Over a year ago

Yes, you can use Form Data to rebuild your form and append the file, see this: developer.mozilla.org/en-US/docs/Web/Guide/…

user1909186 Over a year ago

Yeah, that's what I did, but I wanted to avoid that. Oh well. Thanks!

joseeight Over a year ago

I see, sorry, I don't think there's a simpler way than that :)

user1909186 Over a year ago

Fair enough. I was stupid and had created an entirely different flow that has too many moving parts/dynamic inputs. Thanks!

Clay · Accepted Answer · 2015-08-20 04:43:48Z

1

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

answered Aug 20, 2015 at 4:43

Clay

4,7703 gold badges37 silver badges49 bronze badges

Collectives™ on Stack Overflow

JS + HTML5: Uploading an audio blob via HTML form

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related