Voice Record on Mobile Web Application

Question

Question:
Is it possible, with some sort of technology, to integrate voice recording into a mobile web application?

Some background:
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.

Voice Recording Requirements:
1. Must work with both iOS and Android.
2. Must work in most current versions of Firefox, Google Chrome, Internet Explorer, Opera, and Safari.
3. Must work within the framework of a mobile web application.
4. Must be able to record without being actively connected to the internet.
5. The client application shouldn't require the user to alter their phone OS.

I tried to be as specific as possible to assist in allowing you to answer this question accurately. If anything is unclear, just let me know in a comment below, and I will further clarify.

Answer 1

Check this http://www.html5rocks.com/en/tutorials/getusermedia/intro/

HTML Media Capture <input type="file">

Work for most of the mobile browsers, but it works not well because it will require native recording app and needs to active manually.

getUserMedia() and WebRTC

So far, only the Chromium support it well in mobile.

So, I gave up the web app. Hybrid app is the solution.

If you want to try the hybrid app for recording, you can check the Cordova Plugin https://github.com/emj365/cordova-plugin-audio-recorder-api that I created for recording task in the hybrid app.

Answer 2

It looks like in the years since asking this question a solution has surfaced. This solution has come in the form of MediaStreamConstraints dictionary audio property.

The Web API docs from Mozilla have a very nice example shown below:

document.getElementById("startButton").addEventListener("click", function() {
  navigator.mediaDevices.getUserMedia({
    audio: true
  }).then(stream => audioElement.srcObject = stream)
    .catch(err => log(err.name + ": " + err.message));
}, false);

Resources

• https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints/audio

Answer 3

If you want to record it as an audio, I think you can only make it for Chrome dev, Chrome canary, Opera next, and some mobile browser. Using the WebRTC getUserMedia() API then make the blob URL of the audio data URL to save it.

If you want to record it as text maybe you can use <input -x-webkit-speech/> for webkit browsers. Make an event that make every-time it stop recording it'll add the currently recorded speech to an element and start recording again. Finally, make a blob URL to save it as a text file.