Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Voice recording on iPhone by using Safari and HTML5

Tags:

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?

like image 667
Abdüssamet Aslan Avatar asked Feb 14 '17 08:02

Abdüssamet Aslan


People also ask

Can I use my iPhone as an audio recorder?

With the Voice Memos app (located in the Utilities folder), you can use iPhone as a portable recording device to record personal notes, classroom lectures, musical ideas, and more.


3 Answers

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

like image 84
haberdasher Avatar answered Oct 20 '22 08:10

haberdasher


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

like image 34
choasia Avatar answered Oct 20 '22 08:10

choasia


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.

like image 43
Vincent Fitzgerald Avatar answered Oct 20 '22 08:10

Vincent Fitzgerald