网络音频 API 流：为什么 dataArray 没有改变？

Question

编辑 2：已解决。请参阅下面的答案。

编辑 1：

我稍微修改了我的代码，添加了一个增益节点，移动了一个函数。我还发现如果我使用麦克风，它会起作用。仍然不适用于 USB 音频输入。任何的想法？这是我当前的代码：

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();
  }

}

OLD/ORIGINAL POST:

我当前的代码是这样的，我目前通过 USB 音频接口连接了一个 kewboard：我有信号，已经尝试过其他程序..所以：

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();

  });
}

当我弹奏键盘时，dataArray 根本没有改变。为什么？我是新手，所以可能我做错了什么......

Answer 1

好的，现在可以使用了。我的基本当前测试代码如下。 Html里面只有一个div.monitor可以写。目前在 firefox 上测试。我的硬件是键盘 > 调音台 > behringer UCA222 > 电脑 (usb)。弹奏键盘时得到数据，现在很开心

与原始代码有几处不同，但我认为最重要的是我在全局保存媒体源 (window.audiosource)。这里还有其他关于相关问题的帖子，例如：Chrome: onaudioprocess stops getting called after a while and this HTML5 Microphone capture stops after 5 seconds in 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));
}

网络音频 API 流：为什么 dataArray 没有改变？

Web Audio API Stream: why isn't dataArray changing?

audio-streaming

live-streaming

html5-audio

audiocontext

web-audio-api