帶有畫布的音頻可視化器

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); 你應該看到你想要的。 我通過注釋一行來測試您的代碼，並體驗了您想要的內容。