What's wrong with my code to record audio in HTML5?

Question

I'm trying to record audio via a microphone with the latest Chrome beta (Version 21.0.1180.15). It seems that almost everything to do it is implemented in Chrome beta now. I even get access to the microphone. Though I can't connect the stream with an audio element. But to my understanding it should work if there is no bug.

createMediaStreamSource() is not yet implemented. As a work around I want to use createMediaElementSource() to route the audio from the microphone through a muted audio element.

Using the code below I get one of these two error message in the console:

GET blob:file%3A///625fd498-f427-43d5-959b-3b49c6d53ab5 404 (Not Found)

or

Not allowed to load local resource: blob:null/8df582cc-b663-489b-bf49-1785226fc7b7

The error is caused by this line:

audio.src = window.webkitURL.createObjectURL(stream)

Is there something wrong with this line? How to connect the stream to the audio element source? Or is it a bug in Chrome that makes it impossible to create an object URL?

Code:

var context = null;
var elementSource = null;

function onError(e) {
  if (e.code == 1) {
    alert('User denied access to their camera');
  } else {
    alert('getUserMedia() not supported by your browser');
  }
}

window.addEventListener('load', initAudio, false);
function initAudio() {
  navigator.webkitGetUserMedia({audio:true}, function (stream) {
    var audio = document.querySelector('#basic-stream');
    audio.src = window.webkitURL.createObjectURL(stream);
    audio.controls = true;
    context = new webkitAudioContext();
    elementSource = context.createMediaElementSource(audio);
    elementSource.connect(context.destination);
  }, onError);
}

<div>
    audio id="basic-stream" class="audiostream" autoplay muted></audio>
</div>

Answer 1

I'm not sure if this is related, but there is an outstanding issue regarding getUserMedia() with audio.

http://code.google.com/p/chromium/issues/detail?id=112367

Answer 2

If it isn't absolutely necessary, please don't re-invent the square wheel: https://github.com/mattdiamond/Recorderjs