How to record audio on webpage (iOS, Android, PC/Mac) - no flash

android ios html audio-recording microphone
Jim Jones picture Jim Jones · Nov 6, 2013 · Viewed 34.9k times · Source

I have a requirement to allow a user to record an audio file using their microphone, but it has to work without flash as it needs to work on iOS (mobile safari), Android browser or Chrome, and a modern browser on a PC/Mac.

Is there a clean, simple HTML5 method for recording audio and posting to a server? I haven't been able to find anything.

Answer

vzamanillo picture vzamanillo · Dec 24, 2013

You can use the HTML5 WebAudio API.

An introduction to audio and video capturing Capture audio & video in HTML5

A good library to record audio with samples Recorder.js

A complete and working sample using Recorder.js How to record audio in Chrome with native HTML5 APIs

Other WebAudio API demos HTML5 Web Audio API Demos and Libraries

Supported browsers Can I use Web Audio API?

Regarding to send the data to other server, using Recorder.js you can get the audio buffer, then you could use XMLHttpRequest to POST the arraybuffer or blob to the destination server directly or encoded as base64.

MDN: Sending and Receiving Binary Data

Html5Rocks: New trick ins XMLHttpRequest2, sending data

Related questions

How to create a link for all mobile devices that opens google maps with a route starting at the current location, destinating a given place?

I rather thought this would not be so hard to find out but appearantly it is not easy to find an awesome cross device article, like you'd expect. I want to create a link which opens either the mobile device's …

Read More
Background image jumps when address bar hides iOS/Android/Mobile Chrome

I'm currently developing a responsive site using Twitter Bootstrap. The site has a full screen background image across mobile/tablet/desktop. These images rotate and fade through each, using two divs. It's nearly perfect, except one issue. Using iOS Safari, …

Read More
HTML file input control with capture and accept attributes works wrong?

My problem: Then user click the input type=file user must get the upload file + camera dialog. I'm using for this html attributes accept and capture. But on some modern devices this doesn't happen. Below there are the code examples …

Read More