如何将一个或两个乐器连接到 Web Audio API 并拆分立体声信号？

Question

编辑 3：

这只是 Firefox 的问题，在 Chrome 中有效，所以问题解决了，请参阅下面的答案。感谢克里斯的帮助！

编辑 2：

按照 Chris 的建议，我在 getUserMedia 调用上更改了一行，但它现在不起作用，也许我使用了错误的语法，但此功能未记录：

if(navigator.getUserMedia){
  navigator.getUserMedia(
    { audio: { optional: [{ echoCancellation: false }] } }
    ,function(stream){ init_stream(stream); }
    ,function(err){ console.log('The following gUM error occured: ' + err); }
  );
}

此外，您现在可以在此处关注进度：

http://jsfiddle.net/stratboy/aapafrbu/1/

编辑 1：

我目前正在弹奏键盘 > 混音器 > behringer UCA222 > mac (usb)。我当前查看一些数据的代码如下。我看到左声道的数据发生变化，但右声道没有变化，尽管我在混音器上做了什么。可能是什么原因？

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_left = audiocontext.createAnalyser();
var analyser_right = audiocontext.createAnalyser();
var splitter = audiocontext.createChannelSplitter(2);
var index = 0;

function init_stream(stream){
  window.audiosource = audiocontext.createMediaStreamSource(stream);

  audiosource.connect(splitter);
  splitter.connect(analyser_left,0);
  splitter.connect(analyser_right,1);

  listen();
}

function listen(){
  requestAnimationFrame(listen);

  analyser_left.fftSize = 256;
  var leftBufferLength = analyser_left.frequencyBinCount;
  var leftDataArray = new Uint8Array(leftBufferLength);

  analyser_left.getByteTimeDomainData(leftDataArray);
  $('.monitor_left').html(JSON.stringify(leftDataArray));


  analyser_right.fftSize = 256;
  var rightBufferLength = analyser_right.frequencyBinCount;
  var rightDataArray = new Uint8Array(rightBufferLength);

  analyser_right.getByteTimeDomainData(rightDataArray);
  $('.monitor_right').html(JSON.stringify(rightDataArray));

}

if(navigator.getUserMedia){
  navigator.getUserMedia(
    { audio: true }
    ,function(stream){ init_stream(stream); }
    ,function(err){ console.log('The following gUM error occured: ' + err); }
  );
}

我想将我的吉他弹入计算机并通过网络音频 API 分析声音。我知道可以使用麦克风，但插入真正的乐器呢？

Answer 1

是的。我一直这样做（使用非麦克风源）。只需获得支持吉他/乐器输入的 USB 音频接口即可。

Answer 2

所以，最初的问题是关于将更多乐器/实时源（例如乐器和麦克风）连接到网络音频 api 并分析流。

答案几乎是肯定的 :P 正如 Chris 所写，目前无法获得多个乐器，但可以拆分立体声信号！所以我所做的是通过一个带有 2 个源（例如，一个键盘和一个麦克风）的混音器，将一个放在左声道，一个放在右声道。然后连接到某种 USB 声卡（我目前使用的是便宜的 behringer UCA222）。

原来Firefox似乎仍然无法拆分信号，但Chrome可以做到，对我来说已经足够了。一些工作代码是这样的，它是不言自明的：

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_left = audiocontext.createAnalyser();
var analyser_right = audiocontext.createAnalyser();
var splitter = audiocontext.createChannelSplitter(2);
var index = 0;

function init_stream(stream){
  window.audiosource = audiocontext.createMediaStreamSource(stream);

  audiosource.connect(splitter);
  splitter.connect(analyser_left,0);
  splitter.connect(analyser_right,1);

  listen();
}

function listen(){
  requestAnimationFrame(listen);

  analyser_left.fftSize = 256;
  var leftBufferLength = analyser_left.frequencyBinCount;
  var leftDataArray = new Uint8Array(leftBufferLength);

  analyser_left.getByteTimeDomainData(leftDataArray);
  $('.monitor_left').html(JSON.stringify(leftDataArray));


  analyser_right.fftSize = 256;
  var rightBufferLength = analyser_right.frequencyBinCount;
  var rightDataArray = new Uint8Array(rightBufferLength);

  analyser_right.getByteTimeDomainData(rightDataArray);
  $('.monitor_right').html(JSON.stringify(rightDataArray));

}


if(navigator.getUserMedia){
  navigator.getUserMedia(
    { audio: true }
    ,function(stream){ init_stream(stream); }
    ,function(err){ console.log('The following gUM error occured: ' + err); }
  );
}

最后要测试的小提琴在这里：jsfiddle.net/stratboy/aapafrbu

您可以在播放时看到位的变化。

作为一名网络程序员，我不明白的一件事是，当在键盘上播放单个音符时，没有可以捕捉到的“onAudioSomething”事件。但也许这很合乎逻辑，因为我猜这样的事件通常对一首音乐毫无用处，因为音频增益通常没有“零点”。所以分析来源的方法是通过 requestAnimationFrame() 进行轮询。

希望它可以帮助其他一些探索者:)