Canvas 的音频可视化工具

Question

我正在根据我发现的几个不同的代码笔实验构建一个音频可视化工具。我是 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); ，你应该看到你想要的。我通过注释行测试了你的代码，体验了你想要的。

Canvas 的音频可视化工具

Audio Visualizer with Canvas

javascript

audio

canvas

visualizer