Question

我根据我发现的几个不同的代码实验构建了一个音频可视化工具。我是画布的新手，我正试图弄清楚如何使这个运行更顺畅。到目前为止，它运作良好：http://codepen.io/ericjacksonwood/pen/bBGEbM

这是可视化工具本身的结构：

function Visualizer() {
  canvasContext.clearRect(0, 0, canvas.width, canvas.height);
  analyser.getByteFrequencyData(frequencyData);

  var frequencyWidth = (canvas.width / bufferLength * 4),
    frequencyHeight = 0,
    x = 0;

  for (var increment = 0; increment < bufferLength; increment++) {
    frequencyHeight = frequencyData[increment] * (canvas.height * 0.002);

  canvasContext.fillStyle = "#0000FF";
  canvasContext.fillRect(x, canvas.height - frequencyHeight, frequencyWidth, frequencyHeight);
    x += frequencyWidth + 2;
  }

  call = requestAnimationFrame(Visualizer);
}

但是，我希望暂停时酒吧会掉到底部，而不是让它们完全消失。以下是我希望实现的功能的更好示例：http://codepen.io/ericjacksonwood/pen/xRmXEy

这个例子效果很好，但我不需要彩虹条，所以我觉得大多数JS都可以被忽略。

Answer 1

由于您正在停止动画，因此条形图完全消失。只需暂停音频，让动画不呈现任何内容。注释掉cancelAnimationFrame(call);，你应该看到你想要的东西。我通过评论该行测试了您的代码，并体验了您想要的内容。

带有画布的Audio Visualizer

1 个答案: