Fluxo da API de áudio da Web: por que o dataArray não está mudando? - html5-audio, audio-streaming, web-audio, streaming ao vivo, audiocontext

EDIT 2: resolvido. Veja a resposta abaixo.

EDIT 1:

Eu mudei meu código um pouco, adicionei um nó de ganho, movi uma função. Eu também achei que se eu usar o microfone, vai funcionar. Ainda não funciona com entrada de áudio usb. Alguma idéia? Este é o meu código atual:

window.AudioContext = window.AudioContext || window.webkitAudioContext;

window.onload = function(){

var audioContext = new AudioContext();
var analyser = audioContext.createAnalyser();
var gainNode = audioContext.createGain();

navigator.mediaDevices.getUserMedia({ audio:true, video:false }).then(function(stream){ //MediaStream

var source = audioContext.createMediaStreamSource(stream);
source.connect(analyser);
analyser.connect(gainNode);
gainNode.connect(audioContext.destination);

listen();

});

function listen(){

analyser.fftSize = 256;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
var index = 0;

function write(){
requestAnimationFrame(listen);
analyser.getByteTimeDomainData(dataArray);
$(".monitor").html(JSON.stringify(dataArray) + " -- " + (index++));
}

write();
}

}

VELHO / ORIGINAL POST:

meu código atual é este, e eu atualmente conectei um kewboard através de uma interface de áudio USB: Eu tenho sinal, já tentei com outros programas .. Então:

window.AudioContext = window.AudioContext || window.webkitAudioContext;

window.onload = function(){

var audioContext = new AudioContext();
var analyser = audioContext.createAnalyser();

navigator.mediaDevices.getUserMedia({ audio:true, video:false }).then(function(stream){ //MediaStream

var source = audioContext.createMediaStreamSource(stream);
source.connect(analyser);
analyser.connect(audioContext.destination);

analyser.fftSize = 2048;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);

function listen(){
requestAnimationFrame(listen);
analyser.getByteTimeDomainData(dataArray);
$(".monitor").html(JSON.stringify(dataArray));
}

listen();

});
}

Enquanto eu estou tocando meu teclado, o dataArray não muda nada. Por quê? Eu sou novo nessas coisas, então provavelmente estou fazendo algo errado ...

Respostas:

Ok, agora está funcionando. Meu código de teste atual básico é o seguinte. Html não tem nada além de um div.monitor para escrever dentro. Atualmente testando no firefox. Meu hardware é teclado> mixer> behringer UCA222> computer (usb). Eu recebo dados ao tocar o teclado e estou feliz agora.

Existem várias diferenças em relação ao código original, mas acho que o mais importante é que estou salvando a fonte de mídia globalmente (window.audiosource). Há outras postagens aqui sobre um problema relacionado, por exemplo: Chrome: o onaudioprocesso deixa de ser chamado depois de um tempo e isto A captura de microfone do HTML5 para depois de 5 segundos no Firefox.

window.AudioContext = window.AudioContext || window.webkitAudioContext;

navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);

var audioContext = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioContext.createAnalyser();

if(navigator.getUserMedia){
navigator.getUserMedia(
{ audio: true }
,function(stream){
window.audiosource = audioContext.createMediaStreamSource(stream);
audiosource.connect(analyser);
listen();
}
,function(err){ console.log("The following gUM error occured: " + err); }
);
}

function listen(){
requestAnimationFrame(listen);

analyser.fftSize = 256;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);
$(".monitor").html(JSON.stringify(dataArray));
}