Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 224
Jim Jones Avatar asked Nov 06 '13 15:11

Jim Jones


2 Answers

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

like image 186
vzamanillo Avatar answered Sep 22 '22 14:09

vzamanillo


Professionally speaking I would say no, there are audio APIs for HTML5 but their implementation varies across browsers at the moment. If you're doing this for a tech demo of sorts then that might suffice but otherwise you might need to fall back to other technologies like flash and/or native apps for more reliable results.

like image 37
Roy Avatar answered Sep 22 '22 14:09

Roy