1

I am working with a school group that has a Django website with a page that allows the users to press a button, record audio, and save this audio to their user pages. This website was built to work on computers and Samsung tablets with Dolphin browsers using the HTML Media Capture to capture the audio by launching the microphone app on the tablets. The group wants to now switch to iPads. I have been researching ways to launch the microphone app from iPads but it seems this is not possible using HTML5. I have done some research and seen the links below, but I don't know what the best strategy is to modify the existing website to make it work on the iPad.

What is the best way forward to allow this group to record audio (not video) from their iPads using a browser-based website?

Research--

http://caniuse.com/#search=getUser - shows getUserMedia will not work on iPads

http://www.html5audio.org/2012/11/capturing-audio-on-ios-6-via-the-videotag.html - looks pretty hacky, does it work?

How to record and play voice in ios6 using HTML5 - using PhoneGap might work, but how would the recording app be launched from the browser and then save back the audio to the users account?

Thanks,

Lee

Community
  • 1
  • 1
lee
  • 11
  • 3
  • Related: [How to use getUserMedia in Chrome for iOS](https://stackoverflow.com/q/29160819/1066234) – "The chrome app on your iPhone or iPad is not running "a full" version of chrome. It's capabilities are limited to the iOS platform." – Avatar Nov 05 '18 at 16:23

2 Answers2

0

Safari iOS does not (yet) support the accept="audio/*" part of the <input> element even though it does support taking videos and images through HTML Media Capture.

<input type="file" accept="audio/*" > on iOS 10 will prompt the user to select between:

  • Take Photo or Video
  • Photo Library
  • iCloud Drive
  • More...

The same code works just fine in Chrome on Android.

Safari in iOS6 was the 1st mobile Safari to support the <input ... > element and I've tested all the way up to iOS10. Chrome on iOS uses the same rendering engine so the same limits apply.

octavn
  • 3,154
  • 32
  • 49
0

After having the same problem for a year, I found a new article with a solution: How to record audio from a mobile web page on iOS and Android

One of the newer APIs available is the MediaRecorder API. My first attempt at building this application started with this class. I implemented the entire application and it worked great on my desktop. It was easy to capture audio and the data was already compressed into .ogg format and ready to ship to my server. Then I tried it on iOS. It turns out that the MediaRecorder API is not supported and wouldn’t meet my needs. After I stopped cursing Apple, I began again from scratch.

... That was the last piece of the puzzle that allowed me to construct a working demo and it revolves around three steps:
1. Capture the microphone so we can begin recording
2. Accumulate captured audio data into a series of byte array chunks
3. Combine the chunks into one large array and massage the array into the format of a .wav file

There is a bunch of code on the website. And here is the demo file: https://www.gmass.co/blog/wp-content/uploads/2018/03/wzrecorder.zip

I have tested it and it works on iPad.

Demo: https://q2apro.github.io/wzrecorder/

Avatar
  • 14,622
  • 9
  • 119
  • 198