带有画布的音频可视化器

Question

我正在根据发现的一些不同的Codepen实验来构建音频可视化器。 我是画布的新手，正在尝试弄清楚如何使此运行更平稳。 到目前为止，它运行良好： 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); 你应该看到你想要的。 我通过注释一行来测试您的代码，并体验了您想要的内容。