27

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.

Jim Jones
  • 2,767
  • 4
  • 33
  • 39
  • 1
    I was just going to ask this today. I've looked around a lot and I'm pretty sure the answer is NO. It's workable with Chrome and Firefox, but IE and Safari are no dice. Would love to hear some recent thoughts on the matter though. – Matt J. Dec 17 '13 at 22:37
  • @MattJ. You can look into the following http://www.html5rocks.com/en/tutorials/getusermedia/intro/. This supports mobile browsers as well, just like you need. – Akshat Singhal Dec 18 '13 at 07:30
  • 1
    Akshat, sorry, but I already looked at that. Only supports Chrome and Firefox. The articles says that iOS 6+ is supposed to support it, but that ended up being dropped. The article is outdated. – Matt J. Dec 19 '13 at 07:25
  • How about javascript? – Cilan Dec 21 '13 at 00:20
  • HTML5 capture API hasn't been implemented yet, so flash is the only option right now. – Cilan Dec 21 '13 at 16:33
  • @Jim Jones Facing the same issue. Found any solution? – Nishit Modi Jul 12 '16 at 12:08

3 Answers3

37

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

vzamanillo
  • 9,905
  • 1
  • 36
  • 56
  • 26
    No good. The question specifically asks about iOS. Web API recording is a no-go under Safari and Recorder.js will only yield an error message saying the API is not supported. – Matt J. Dec 25 '13 at 00:32
  • I did not test Web Audio Api on Safari (iOS) but apparently the api is supported from 6.0-6.1 or later, what version are you using? – vzamanillo Dec 26 '13 at 09:13
  • 4
    @vzamanillo The web audio api is supported by Safari, but accessing the mic/input is not. I have just tested this in Safari 8 (8.0.8) on OS X 10.10.5. (I have not tested in iOS but have read elsewhere that the restriction is the same as desktop Safari) – Billy Sep 29 '15 at 15:57
  • 1
    Any update on this for mid 2016? Can I use Windows Phone, Android? Is there a solution for Nokia phones? – John Carlson Aug 23 '16 at 18:59
  • 3
    This does not work on the iPhone. Just checked it on iOS 10.2. Up-to-date info here: http://mobilehtml5.org. – David Simic Jan 19 '17 at 13:12
  • iOS 11 (to be released fall 2017) is supposed to implement the Web Audio APIs in Safari and WebViews. – Dobes Vandermeer Jul 20 '17 at 17:59
3

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.

Roy
  • 705
  • 2
  • 11
  • 32
2

getUserMedia() is now widely supported across mobile:

and desktop:

  • Safari 11
  • Chrome
  • Firefox
  • Edge 12
  • Opera

Once webcam/mic permission is given and the mic data kicks in you can:

Here's a demo I made (live demo, source on GitHub) that uses Matt Diamond's Recorder.js to record audio (pcm in .wav files) running in Safari on iOS 11. Clicking Record prompts the user to allow microphone access:

Recorder.js demo running on iOS 11 Clicking Record prompts the user to allow microphone access

octavn
  • 3,154
  • 32
  • 49