oscilloscope of speaker input stops rendering after a few seconds

Question

The following script reads the audio from the user's microphone and renders an oscilloscope on a html canvas.

The source is taken from an example of the mozilla developer network: Visualizations with Web Audio API

And here is the fiddle: http://jsfiddle.net/b7j8pktp/

mozGetUserMedia

(note: code has no fork mechanism for different browsers: works only with firefox)

It works fine for a few seconds and then immediately stops rendering.

Whereas this works totally stable: http://mdn.github.io/voice-change-o-matic/

---

The problem can be reduced to the following code. The microphone activation icon (next to the the address bar in firefox) disappears after about 5 seconds:

navigator.mozGetUserMedia({audio: true},                           
    function() {}, function() {} );

(http://jsfiddle.net/b7j8pktp/2/)

Answer 1

This is a known bug in Firefox. Just take the stream from the getUserMedia call and hook it up to the window like so:

navigator.mozGetUserMedia({audio: true}, function(stream) { window.stream = stream; // rest of the code }, function err() { // handle error });

Hopefully we can get it fixed soon. The problem is that we're failing to add a reference to the stream when we do the AudioContext.createMediaStreamSource call, so that the stream is not referenced by anything anymore when the getUserMedia callback returns, and it is collected by the cycle collector when it runs, that is, a couple seconds later.

You can follow along in https://bugzilla.mozilla.org/show_bug.cgi?id=934512.