javascript - 带 Canvas 的音频可视化工具

Question

我正在根据我发现的一些不同的 codepen 实验构建一个音频可视化工具。我是 Canvas 新手，正在尝试找出如何使其运行得更顺利一些。到目前为止，它运行得很好: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); 你应该会看到你想要的。 我通过注释该行来测试您的代码，并体验您想要的内容。