音頻可視化與畫布

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);，你應該看到你想要的。 我通過評論該行來測試您的代碼，並體驗了您的願望。