HTML5 capture audio from default microphone

Question

Can somebody help me on how to capture audio from default microphone using HTML5? There are many samples available, but none of them seem to working. I have tried Audio capturing with HTML5 As it only works with chrome with flags enabled. but it's getting NavigatorUserMediaError. The video icon on the address bar has a red cross sign and its tooltip says 'this page has been blocked from accessing your camera and microphone'

Rear

Answer 1

There's some great articles on HTML5 Rocks. This is just one that I pulled. http://updates.html5rocks.com/2012/09/Live-Web-Audio-Input-Enabled

// success callback when requesting audio input stream
function successCallback(stream) {
    var audioContext = new (window.webkitAudioContext)();

    // Create an AudioNode from the stream.
    var mediaStreamSource = audioContext.createMediaStreamSource( stream );

    // Connect it to the destination to hear yourself (or any other node for processing!)
    mediaStreamSource.connect( audioContext.destination );
}

function errorCallback() {
    console.log("The following error occurred: " + err);
}

navigator.webkitGetUserMedia( {audio:true}, successCallback, errorCallback );

Bitter

thanks for your reply. i got this too. but seems not working. from the link we can get two sample live demos. One and Two but none seems working. both asks me to allow to use microphone but after that nothing happens. the only change is there is a red ball blinking slowly on title icon. my chrome is up-to-date and also i have enabled 'Web Audio Input'. can anyone provide a working sample. – Rear

HTML5 Rocks created some web audio demos when those APIs were new, but they never updated the demos as the APIs evolved. Sadly, some of their web audio demos no longer work. – Orient

I just updated this, there are now two callbacks for success and error, you can pass {audio: true} as the first parameter and if the user allows access to the microphone it will come back as a stream in the successCallback. You can then create a media stream and do whatever you'd like with it. – Bitter

Answer 2

make sure you start the demo from a webserver - simply copy/paste & start from file system won't work - in chrome you never get access to the mic this way.

Bannerman

Answer 3

Recently (not sure when) Chrome added the requirement that the page be accessed over SSL to enable getUserMedia.

Hunt