admin管理员组

文章数量:1296915

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.

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.

Share Improve this question edited May 12, 2016 at 0:11 Ten Bitb asked Apr 16, 2016 at 16:26 Ten BitbTen Bitb 2,3741 gold badge30 silver badges42 bronze badges 15
  • Are you sure it's a different "mode" when in speaker-mode or are you just assuming all this? – nicholaswmin Commented May 7, 2016 at 22:04
  • @NicholasKyriakides I assumed a different mode exists as doing an amplification of the ining waveform does not seem to improve the quality enough for me to decode my audio signal. By amplification, I'm just multiplying the samples. I didn't think that would work anyway, but it was worth a try. The Sound Analyzer app for Android, which is doing something very similar to what I am trying to achieve, is able to pick up distant sounds and draw a spectrogram, so either I'm not doing something correctly or it's impossible with Web Audio. – Ten Bitb Commented May 7, 2016 at 22:13
  • This may help you webrtc.github.io/samples/src/content/devices/input-output – Blindman67 Commented May 8, 2016 at 22:29
  • The ambient microphone of smartphones may be several physical devices but I think they are one device in the OS. So when you want a better audio, you just increase the gain of the microphone and browser lets the OS handle it. I am making assumptions but that is how it should work. So try increasing the gain as in (should work in Chrome, not sure about others): html5rocks./en/tutorials/webaudio/intro – Gokhan Kurt Commented May 10, 2016 at 6:10
  • @Blindman67 Both of your ments are relevant answers to my question so, if either of you want to elaborate your ments into answers, that'd be cool. In short, there actually is a separate mode for speakerphone; having adapted the mediaDevices sample in the first link, the device literally es up as "speakerphone". Though I'm now pretty sure that this was already the default in my case anyway. Using the gainNode also adjusts the volume of the microphone, as seen in the html5rocks tutorial. But it turns out that my problem is likely unrelated to the mic input. – Ten Bitb Commented May 11, 2016 at 16:17
 |  Show 10 more ments

3 Answers 3

Reset to default 3

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.

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.

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.

本文标签: javascriptWeb Audio How can I get a mobile microphone to pick up audio from a distanceStack Overflow