Voice Record on Mobile Web Application - javascript

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.

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.

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

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.

Related

How can I capture the AudioDestinationNode value when headphones are plugged in with Web Audio API?

I've been looking for a solution that detects the difference between the default speakers and headphones on a computer. I understand that with Web Audio API, AudioDestinationNode represents the output device, where users hear audio.
My question (to be specific) is whether or not it is possible to detect a change in the users' audio output device (wired/wireless headphones). If this is not possible, is there a way to use phonegap to do so, for computers as well as mobile devices?
My goal is to initiate an event only when the AudioDestinationNode maps to headphones or external speakers.
There's nothing in the Web Audio API spec for this.
It might be possible in Phonegap (at least if you were willing to write your own Phonegap plugin) – but that's only going to help on mobile. As far as I know, there's no way to determine the audio output device in any of the major desktop browsers.
Just out of curiosity, what are you hoping to do as a result of the user switching between built-in speakers and an external device?

Capturing image with webcam

I'm working on a project with Asp.net MVC4. I need to take pictures with a webcam. This application should be configurable with any tablet.
Currently runs the application on desktop, on tablets no.
I am using jscam.swf and jscam_canvas_only.swf.
On tablets I use this the Samsung Galaxy on these devices install adobe flash player to a well does not work ... someone knows some other technology to take pictures or if someone can help me solve this problem I'll be grateful
Flash has limited support on Android tablets and no support on iOS devices.
A better solution may be to move to 100% HTML5. When using HTML5, your browser has access to your webcam. Below are some links showing HTML5 accessing your webcam:
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
http://www.iandevlin.com/blog/2012/06/html5/filtering-a-webcam-using-getusermedia-and-html5-canvas
https://developer.mozilla.org/en-US/docs/WebRTC/navigator.getUserMedia
Latest method as of 2020
const userVideo = await navigator.mediaDevices.getUserMedia({ video: true })
const userVideoTrack = userVideo.getVideoTracks()[0]
const photoBlob = await new ImageCapture(userVideoTrack).takePhoto()
You can then proceed the blob with something like the FileReader or URL API.
Have you tried with Silverlight? Since you are using .NET this might be helpful. http://elegantcode.com/2009/11/20/silverlight-4-webcam-a-quick-glance/
SL is a simple plugin it runs on every browser, you just need to embed your Silverlight component within your view code and the browser will handle it as an object tag.
Hope it helps.
I found the way to enable the camera and audio using HTML5 Chrome using Android for tablets.
We connect to chrome://flags/ and look for WebRTC.
After we enable this flag.
Restart the browser or tablet and working properly.

Audio recording with HTML5

I'm trying to implement audio recording in a website. Basically the user should be able to press a button and speak something into the microphone. The recorded audio should then be sent to the server for further processing. I realise that you can do this with Flash, but for now I'm trying to avoid that.
I found several resources on the internet about it (i.e. link) but as it seems, this functionality is not widly supported yet. I experienced differences betweet the used browser and between the used operating system. For instance, the Chrome Browser doesn't seem to access any microphone on Linux correctly. So i was wondering if anyone knows a good resource to dive into this. Or maybe someone tried to set up something like this himself, and can help with some suggestions about where the limitations of HTML5 and the JavaScript Web Audio API are right now.
Thanks!
As of Chrome Version 27.0.1453.56 beta Mac, audio recording works with this demo application https://github.com/mattdiamond/Recorderjs
This app returns back a WAV file for the user which can be uploaded to the server.
If you want a truly robust solution that works on most desktop web browsers, you may need to resort to Flash.
This article covers up pretty well the current state of audio video capture possibilites using HTML5:
http://hdfvr.com/html5-video-recording
Also for just audio capture, here's a gitHub project that records audio to mp3 directly from the browser:
https://github.com/nusofthq/Recordmp3js

Looking for a cross-mobile browser compatible way to record from a built in microphone?

I want to make a very simple web app that takes the audio signal from the phone's microphone and varies some simple graphics on the page in as near to real-time as possible.
I'd prefer the app to be web-based (rather than iOS/Android apps) so that users can be directed to the page in a more rapid way. (I.e. go to sh.ort/url and the web app starts straight away)
Is this currently possible?
I'm not sure how well supported the web audio API is, or some of the more modern HTML5 features.
Thanks
This gives you a nice tutorial on how to record audio through the HTML5 API: http://www.html5rocks.com/en/tutorials/getusermedia/intro/
Unfortunately, as seen in this post, Apple doesn't support any API for this yet: Mobile Safari Audio Recording from Microphone

Audio streaming and voice recording via HTML and Javascript

I'm on a new project that requires to stream audio files (mp3) and record voice messages.. of course my first option was to use flash. But the problem is that the customer wants the website to be iPhone friendly.
Is there any technologie that allows me to play and record voice messages just with javascript/php/xhtml?
And of course, the website should be fully compatible with firefox, safari, internet explorer, etc.
I googled it and everything I found was flash-based.
but if you have any clue about it, please let me know.
No. Not even the new-ish HTML5 has any features to record audio. You'd need to go through Flash or Java - but that would rule out iPhone.
if you want to record sound you should do it with the new HTML5's api's, you can read more about it on
https://labs.ericsson.com/developer-community/blog/beyond-html5-audio-capture-web-browsers
However, this is theory, in reality no browsers support it and there is no way to do it. So in short: you cannot do what you ask.
What you could do is create an iPhone native app for those who want to use iPhone, and a flash website for those who want to access it with a regular browser.

Categories

Resources