Аудиовизуализатор с холстом

Question

Я создаю аудио визуализатор, основанный на нескольких различных экспериментах, которые я нашел. Я новичок в холсте, и я пытаюсь понять, как сделать этот запуск немного более плавным. До сих пор, это довольно хорошо работает: 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); и вы должны увидеть, что хотите. Я проверил ваш код, прокомментировав эту строку, и испытал то, что вам хотелось бы.