音频可视化与画布

我正在建立一个音频可视化器，基于我发现的几个不同的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可以被忽略。

来源

2016-12-16 Eric Wood

因为您正在停止动画，酒吧完全消失。只需暂停音频并让动画不显示任何内容。注释掉cancelAnimationFrame(call);，你应该看到你想要的。我通过评论该行来测试您的代码，并体验了您的愿望。

来源

2016-12-16 21:23:27 bobjoe

啊。这次真是万分感谢。我更新了笔，它似乎运作良好。 –

音频可视化与画布

回答

相关问题