Web Audio: How can I get a mobile microphone to pick up audio from a distance?

Question

Getting access to the user's microphone through navigator.getUserMedia is pretty easy. But what if I'm using a mobile browser and want to pick up audio from a distance, like with a "speakerphone" mode?

How would I go about achieving this? There seem to be native apps that can achieve this, but what about Web Audio?

The purpose of this is for sending messages between devices using DTMF. I have already achieved this with my laptop because its microphone can record surrounding audio from a great distance, but any mobile phone I have access to seems to only record audio near the "mouthpiece" and so I have to hold the phone extremely close to the source speaker for even a slight chance of having a message received. This defeats the purpose unless I can get the mobile microphone to pick up audio from a distance.

EDIT: By distance, I mean greater than a few feet, as opposed to mere centimeters. Ambient sounds, as opposed to sound localized next to the microphone.

Answer 1

This cannot be done as it's directly related to the hardware of the device. If the device hardware (microphone) cannot pick up sounds from meters away, then there's nothing that can be done.

Answer 2

I am answering my own question here. Thanks to everyone who helped out, though none of the actual answers posted here were satisfactory, IMO.

On newer versions of Chrome, navigator.mediaDevices has a function called enumerateDevices which can be used to list available hardware devices, including microphones. As it turns out, this does return a "speakerphone" device on my Android phone. So, if you have a device where you suspect that speakerphone isn't set as the default browser microphone, and you(or your user) is on Chrome version 47 or above, you can use the device IDs returned by enumerateDevices to specify a specific microphone.

So, if your user chooses an option in a select element for a specific microphone device, you would take the ID for that device and pass it to getUserMedia .

navigator.getUserMedia({ audio: {deviceId: {exact: <insert device uuid here>}} }, callback)

Note that, as of this posting, the enumerateDevices API is only available on Chrome. In any other browser or web view, this probably won't work.

If the volume of the microphone happens to be too low for your application, you can increase it by creating a gainNode for your AudioContext.

volume     = context.createGain()
volume.gain.value = 3 // raises the volume to 300%
audioInput = context.createMediaStreamSource(e)
audioInput.connect(volume)

Or, if you are dealing with raw samples, you can literally multiply each sample by a number before passing them to whatever function you are using to process them.

Answer 3

Two years ago, I implemented a webrtc (using google example) that works on mobile web browser, and the sound is captured with ambience levels. I really didn't a deep code analysis of google libraries but maybe you can start here.