캔버스가있는 오디오 시각화 도구

Question

나는 발견 한 몇 가지 코드 백 실험을 기반으로 오디오 시각화 프로그램을 제작하고 있습니다. 저는 캔버스에 익숙하지 않고이 프로그램을 좀 더 부드럽게 만드는 방법을 알아 내려고 노력하고 있습니다. 지금까지, 꽤 잘 작동하고 : 그냥이 그러나

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/bBGEbM

이것은 비주얼 자체의 구조 완전히 사라진다. 다음은 달성하고자하는 기능의 더 좋은 예입니다. http://codepen.io/ericjacksonwood/pen/xRmXEy 이 예제는 잘 작동하지만 무지개 막대가 필요하지 않으므로 JS의 대부분을 무시할 수 있다고 생각합니다.

Answer 1

애니메이션을 중지하기 때문에 막대가 완전히 사라집니다. 그냥 오디오를 일시 중지하고 애니메이션이 아무 것도 렌더링하지 못하게하십시오. cancelAnimationFrame(call);을 주석 처리하면 원하는 것을 볼 수 있습니다. 줄을 주석 처리하여 코드를 테스트했으며 원하는 내용을 경험했습니다.