Voice recording on iPhone by using Safari and HTML5

Asked 14/2, 2017 at 8:55 Answered 24/1, 2020 at 16:26

I am developing a simple web application which only records a voice from microphone but I have some trouble.

HTML5 voice recording function works well on chrome and firefox desktop or android. But while using mobile browsers on iPhone even chrome and firefox it doesn't work.

I tried recorder.js and result did not change.

Is it possible to recording voice on safari or it is a missing function of safari or iOS?

Scratchboard answered 14/2, 2017 at 8:55 Comment(3)

Try this approach developers.google.com/web/fundamentals/native-hardware/… – Corking 23/5, 2017 at 18:52

@StephenTetreault: That would have been better off as an answer (so long as it spelt out what was explained on that page rather than being just the link). – Stipel 13/10, 2018 at 16:15

@StephenTetreault: This does not work for me (tested with iOS 12, Android 9) - accept audio/* with capture attribute set only brings up the camera app which cannot record audio. – Snicker 5/12, 2018 at 10:35

May 2018 Update (because figuring this out has been tough with all the outdated info).

I found this demo that proves it is possible: https://kaliatech.github.io/web-audio-recording-tests/dist/#/test1

Disabled answered 14/5, 2018 at 22:8 Comment(4)

Keep in mind apple only added proper webrtc support in mobile safari. its still totally F'ed in chrome/ff/webviews. half-assed job by apple. – Corking 6/12, 2018 at 14:46

This github repo is awesome! Works far better than any packaged solutions. And he's calling it just "tests" wow – Skiagraph 14/5, 2020 at 1:36

I think Apple became the new internet explorer. Now that finally that Microsoft got awesome and went with Edge... – Skiagraph 14/5, 2020 at 1:38

My only issue with this is, that the recording formats differ between Safari and other browsers (mp4 vs webm). The demo confirmed my problem (see the recorded file name). This is why I don't think a browser-only solution (with firebase) is enough to be able to have Safari play the recordings of other users and it might be time to integrate ffmpeg (or something else) in some backend (maybe the firebase cloud functions) – Ivo 28/2, 2023 at 15:54

As far as I knew, even on the latest iOS (iOS 10), recording voice on iOS using HTML5 is still impossible. Since all the browsers on iOS are limited to use UIWebView which Safari on iOS uses as well, Chrome on iOS is not able to support any API that can be used for media recording.
For example, recorder.js which you used are built on Media Capture API. If you check caniuse.com, you will find this API is not supported on iOS. (Also check the issue here).
MediaRecorder API is also a promising API but still not supported by Apple's browser.

Check answers below for more information.
1. Record voice from IPhone using HTML5
2. Audio Recording html5 on iOS

Opinicus answered 14/2, 2017 at 9:31 Comment(4)

Safari is the new IE. – Corking 23/5, 2017 at 18:51

I can't believe its still not supported – Navaho 23/3, 2018 at 17:31

any update about if this is been planning to support? it's such a mess that even using chrome on IOS still impossible to use MediaRecorder API – Mccleary 3/6, 2018 at 20:3

@StephenTetreault just ...lol.. and apple is still the new... apple – Tocharian 11/6, 2020 at 2:32

Since iOS11, Safari now supports Media Capture API:

New in Safari 11.0 – Camera and microphone access.

Added support for the Media Capture API. Added ability for websites to access camera and microphone streams from a user's device (user permission is required.)

Announcement by Apple - broken link as of Jul 2018

A copy of the announcement on someone's blog

Therefore recorder.js will work now.

Questa answered 14/9, 2017 at 11:11 Comment(7)

I try record audio in iOS11 but recorder.js dont work. – Uniliteral 25/9, 2017 at 7:46

K48, Were you successful with recorder.js on IOS11? – Ernst 10/10, 2017 at 7:23

@Ernst unfortunately not – Questa 10/10, 2017 at 9:29

audio recording and playback does work in IOS/Safari 11 BUT only from the browser. Standalone (aka save to home screen web app capable) apps do not work nor are they even recognized by the web inspector (which is apparently a bug) – Doble 20/10, 2017 at 5:15

We could not get the microphone to work. Recorder is undefined on iPad Safari and Chrome. Check the code and try it yourself: github.com/q2apro/js-snippet-audiorecord-getUserMedia/blob/… – Hydra 3/2, 2018 at 9:4

The link seems to be broken now – Cato 13/7, 2018 at 10:51

@KerryDavis I don't believe it to be a bug. I went deep into this issue when i found webrtc not workign in chrome, ff, social app webviews. I recall stumbling upon a forum posts where one of the apple support team members just said it wasn't implemented and they didn't have a roadmap for it. This was months ago though and I can't seem to track down the link. Half-assed from Apple if you ask me. – Corking 6/12, 2018 at 14:45

It's now possible and "easy" to do on iOS11 for Safari! The mediaStream API is supported now. The mediaRecorder API however is not. This causes any existing examples out there to not work. So you'll have to implement your own mediaRecorder functionality by connecting the media stream to a webkitAudioContext ScriptProcessorNode and collect the stream buffer on the node's onaudioprocess event. You can then collect the iOS microphone's streaming audio data and do with it what you want, most likely merging it into a wav file for upload/download. This works for any browser that supports the Media Stream API.

Two gotcha's:
- iOS Safari likes to deallocate any AudioContext that wasn't created on the main thread (on a tap) so you can't initialize it on the device media access accepted callback.
- The scriptProccessorNode wont fire any audioprocessed events unless the input AND output are connected for some reason.

Nelson answered 29/11, 2017 at 22:32 Comment(3)

Would you be able to post &| link to any code demonstrating this? I am still struggling to get non-zero-length audio data. – Nickerson 3/2, 2018 at 23:44

Don't forget one more gotcha: AudioContext can only be created upon user interaction (i.e., touchend, click, etc.) – Buchalter 20/2, 2018 at 18:46

Thanks for the tip about connecting both the input and the output, was driving me crazy! – Jens 7/6, 2020 at 16:38

Safari on iOS 11 does NOT support the 2 standards which would make audio (only) recording possible (and easy to implement):

HTML Media Capture for audio (spec, correct syntax ) - audio recording should be passed to a native app which should pass the result back to the browser for upload (it works for video and picture)
MediaStream Recording API (spec, demo) - allows you to record to a blob directly in the browser. The recording can be downloaded or uploaded to a web server.

Willardwillcox answered 29/11, 2017 at 12:25 Comment(0)

I'm using the new iPhone 11 ProMax, with iOS13.3, and have been trying to build out a web app with voice recognition services via HTML5 to work in safari or any browser on my iPhone. It seems iOS developers have blocked audio / video recording at the os level. There is a limited workaround however that might be useful for someone coming here as I did. https://blog.addpipe.com/safari-technology-preview-73-adds-limited-mediastream-recorder-api-support/

Basically, if you go into advanced settings for safari you can enable the mediaRecorder. Their demo works with video capture, I have not seen it with pure audio yet.

Laic answered 24/1, 2020 at 16:26 Comment(0)

Recommended topics

Hot tags