JavaScript-实时处理Web音频api

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

所以我的问题是,我该如何可视化声音并使图表停留在屏幕上,从而可以在一定的时间限制内看到所有频率数据(假设我讲话,而在画布上仅可视化5秒钟).

我正在使用以下代码(摘自示例here)：

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

}

解决方法:

getByteTimeDomainData不会提供频率信息.这些是实时的时域波形值,也称为振幅值.如果您想随时间显示它们,请将其值附加到数组中并进行绘制.如果您想要实际频率值,请使用getByteFrequencyData.

标签：html5-canvas,html5-audio,web-audio,javascript
来源： https://codeday.me/bug/20191031/1972976.html