Record voice from IPhone using HTML5

Question

I have been working on a mobile web application just for my own enjoyment and research. Everything seemed to be working pretty slick with HTML5/CSS and JavaScript for the client application, although it looks like I need a third party technology for voice recording. I had a pretty good solution working with Flash, but after testing it with my IPhone, I had remembered that they don't seem to support flash which is disappointing because I had a pretty good solution going. I want to record voice using HTML5 in Iphone and android. Is there any way?

Answer 1

You could try HTML Media Capture. An article on dev.opera says:

Android OS 3.0 was the first platform to provide HTML Media Capture support, via its default Android Webkit browser. Now HTML Media Capture is also supported by:

• Safari and Chrome Mobile for iOS 6+
• Chrome Mobile for Android OS 3+
• Firefox Mobile for Android OS 3+
• Opera 16 for Android OS 3+

Nonetheless some of them only partially implement the specification or implement an older W3C specification, that makes the code above slightly different:

<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">

It links out to a demo page which you could try on your mobile. I also found this example page. In my quick iOS 7 testing though, it only worked correctly for photos and videos.

---

Edit: Further reading suggests accept="audio/*" isn't actually supported on iOS 6 and 7, only accept="image/*" and accept="video/*".

---

Update: A quick test on iOS 8.3 suggests nothing has changed here: accept="image/*" and accept="video/*" are supported, but accept="audio/*" is not.

---

Update: A quick test on iOS 10.0.2 suggests accept="audio/*" is still not supported, although it looks like you might be able to upload an audio file from iCloud Drive or Dropbox now.

---

Update: Despite what it says in the Webkit blog post, there still seems to be no support for accept="audio/*" in iOS 10.3 on my iPhone 5S.

---

Update: Same story in iOS 11.0.3. There still seems to be no support for accept="audio/*" on my iPhone 5S.

---

Update: Still the same in iOS 12.4.3. There seems to be no support for accept="audio/*" on my iPhone 5S.

Answer 2

This will not work on a website, but if you want to rework your web-app into a mobile app using Cordova this will let you use the microphone input. Takes some knowledge of web audio api to get working.

https://github.com/edimuj/cordova-plugin-audioinput

And RecorderJS to record its output:

https://github.com/mattdiamond/Recorderjs

Someone above mentioned RecorderJS not working on mobile but it does, it's just the mic input that doesn't work.

There is not currently any way I'm aware of to record mic input in a browser on mobile