HTML5 Audio Recording Not Working External Microphone

I am playing around with getUserMedia to gain access to the users microphone in Chrome(Version 28.0.1500.72 m). I am able to record and play back the users input when they use an internal microphone with internal speakers.

As soon as I plug in a usb microphone headset I am no longer able to record the users input. I have switched the device in the chrome setting under privacy and content settings. So chrome does see the newly plugged in microphone. I have restarted chrome and tried it again after plugging in the mic as well. Still no user input.

Thanks In Advance.

Below is the current code I am using.

    window.AudioContext = window.AudioContext||window.webkitAudioContext;
    var html5Recorder;
    var audioContext = new AudioContext();
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
        navigator.getUserMedia({audio:true},handleAudioStream, audioError)
        console.log('Use Flash')

    function handleAudioStream(stream){
        var mediaStream = audioContext.createMediaStreamSource(stream);
        mediaStream.connect( audioContext.destination );
        html5Recorder = new HTML5Recorder(mediaStream);

    function audioError(error){

    function record(){

    function stopRecording(){
           document.getElementById('audio1').src =  window.URL.createObjectURL(e);


This was a bug in the current chrome build I was using (28). Chrome canary works fine.

Can you check the sampling rate on the two audio devices?

There is an existing bug that the non-default microphone only works if the sample rate is the same as the default microphone:

Also, are you on OSX or Linux? The comments in the bug make it look like it should be fixed on Windows.

Try selecting the USB mic as the default one. Chrome does not mange audio devices and it always uses the default mic.

Need Your Help

Best OOP approach to these two small JavaScript classes

javascript oop design-patterns

I'm starting some work on a rather large JS project and want to make sure I structure the code cleanly and efficiently. I've been reading up on a ton of different approaches to OOP in JS and haven't

Bring Div before Img in html using css


I am not able to display div text before image, this is what i want