Voice Recording on iPhone with Safari and HTML5

Question

I am developing a simple web application that only records voice from a microphone, but I have some problems.

HTML5 voice recording function works well on Chrome or Firefox or Android desktop. But when using mobile browsers on the iPhone, even chrome and firefox do not work.

I tried recorder.js and the result did not change.

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

Answer 1

As far as I know, even on the latest version of iOS (iOS 10), voice recording on iOS using HTML5 is still not possible. Since all iOS browsers are limited to using the UIWebView, which Safari uses on iOS, Chrome iOS cannot support any API that can be used for multimedia recording. For example, the used recorder.js is built on the Media Capture API. If you check caniuse.com , you will find that this API is not supported on iOS. (Also check the problem here ).
The MediaRecorder API is also a promising API, but is not supported by the Apple Browser.

Check the answers below for more information.
1. Voice recording from iPhone using HTML5
2. Audio recording html5 on iOS

Answer 2

Starting with iOS11, Safari now supports the Media Capture API:

New in Safari 11.0 - Access to cameras and microphones.

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

Apple Announcement - Invalid Link for July 2018

Copy of someone's blog post

Therefore, recorder.js will work now.

Answer 3

Now it is possible and “easy” to do on iOS11 for Safari! The MediaStream API is now supported. However, the MediaRecorder API is not. This leads to the fact that any existing examples do not work. Thus, you will have to implement your own mediaRecorder functions by connecting the media stream to webkitAudioContext ScriptProcessorNode and creating a stream buffer in the node onaudioprocess event. Then you can collect the iOS microphone audio files and do what you want with it, most likely merging it into a wav file for upload / download. This works for any browser that supports the Media Stream API.

Two keys:
- iOS Safari loves to release any AudioContext that was not created in the main stream (when clicked), so you cannot initialize it on a received callback to access the device’s media file.
- ScriptProccessorNode will not trigger any events processed by the audio process if input and output data are not connected for any reason.

Answer 4

May 2018 update (because finding this out was tough with all the outdated information).

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

Answer 5

Safari on iOS 11 does NOT support 2 standards that will make sound recording (only) possible (and easy to implement):

• HTML Media Capture for audio ( spec , correct syntax ) - the sound recording should be transferred to your own application, which should transfer the result back to the browser for downloading (it works for video and image).
• Recording API MediaStream ( spec , demo ) - allows you to write to notebook directly in the browser. The record can be uploaded or uploaded to the web server.