3

我正在使用网络音频 api 和 requestAnimationFrame 来可视化来自麦克风的音频输入。我可以成功地可视化时域频率数据，但问题是由于网络音频 api 以秒为单位计算时间，所以我的界面每秒都会根据输入的内容而变化。

所以我的问题是，我怎样才能可视化声音并使图表留在屏幕上，因此我可以在一定的时间内看到我的所有频率数据（假设我说话同时在画布上可视化只有 5 秒）。

我正在使用以下代码（取自此处的示例）：

MicrophoneSample.prototype.visualize = function() {
  this.canvas.width = this.WIDTH;
  this.canvas.height = this.HEIGHT;
  var drawContext = this.canvas.getContext('2d');

  var times = new Uint8Array(this.analyser.frequencyBinCount);
  this.analyser.getByteTimeDomainData(times);
  for (var i = 0; i < times.length; i++) {
    var value = times[i];
    var percent = value / 256;
    var height = this.HEIGHT * percent;
    var offset = this.HEIGHT - height - 1;
    var barWidth = this.WIDTH/times.length;
    drawContext.fillStyle = 'purple';
    drawContext.fillRect(i * barWidth, offset, 1, 1);

  }
  requestAnimFrame(this.visualize.bind(this));

}
4

2 回答 2

2

OP, here's some pseudo code. FYI, this really isn't a web audio question, more of an animation question.

Store a variable / field in your visualizer prototype function that keeps track of how many seconds you want to delay the redrawing of your canvas, keep a separate counter that will increment everytime requestAnimFrame(...) gets drawn. Once your counter reaches your delay amount, then redraw the canvas.

Edit Now that I think of it...the solution should be very simple. Correct me if I'm wrong, but this rough solution is assuming that you are calling MicrophoneSample.visualize() from within your animation loop...and therefore, the code therein executes every second. I could be of more help if you post your MicrophoneSample object code as well, or at least your animation loop.

/* NOTE!
*
*/
// Find a way to put these into your PARENT MicrophoneSample object
var delay = 5;
// Note that I am setting delayCount initially to zero - during the loop
// the delayCount will actually get reset to 1 from thereafter (not 0)...
// this gives us a way to initially draw your visualization on the first frame.
var delayCount = 0;

// Pull var times out so it doesn't get calculated each time.
var times = new Uint8Array(MicrophoneSample.analyser.frequencyBinCount);

// Same goes for the canvas...
// I would set these values inside of the PARENT MicrophoneSample object
MicrophoneSample.canvas.width = this.WIDTH;
MicrophoneSample.canvas.height = this.HEIGHT;

// you only need to establish the drawing context once. Do it in the PARENT
// MicrophoneSample object
var drawContext = this.canvas.getContext('2d');

MicrophoneSample.prototype.visualize = function() {

      /*
      *    NOTE!
      */
      // Here's the juicy meat & potatoes:
      // only if the delayCount reaches the delay amount, should you UPDATE THE
      // TIME DOMAIN DATA ARRAY (times)
      // if your loop runs every second, then delayCount increments each second
      // and after 5 seconds will reach your designated delay amount and update your
      // times array.

      if(delayCount == 0 || delayCount == delay) {
          this.analyser.getByteTimeDomainData(times);

          // Now, it would be redundant (and totally noob-programmer of you) to 
          // redraw the same visualization onto the canvas 5 times in a row, so
          // only draw the visualization after the first pass through the loop and then
          // every 5th pass after that :]
          for (var i = 0; i < times.length; i++) {
              var value = times[i];
              var percent = value / 256;
              var height = this.HEIGHT * percent;
              var offset = this.HEIGHT - height - 1;
              var barWidth = this.WIDTH/times.length;
              drawContext.fillStyle = 'purple';
              drawContext.fillRect(i * barWidth, offset, 1, 1);
          }

          // Note: 1, not 0!
          delayCount = 1;
      } 
      else {
          delayCount++;
      } 


      requestAnimFrame(this.visualize.bind(this));
}

And just keep in mind that I haven't actually tested any of this. But it should at least point you in the right direction.

于 2013-03-28T19:28:42.823 回答
2

getByteTimeDomainData 不会为您提供频率信息。这些是实时的时域波形值，也称为幅度值。如果您想随着时间的推移将它们可视化，请将其附加到数组中并绘制它。如果您想要实际频率值，请使用 getByteFrequencyData。

于 2013-03-28T09:46:09.650 回答