Как автоматически прокрутить страницу / синхронизировать просмотр страницы с плейлистом?

Question

Я использую некоторый скопированный и вставленный код (ниже) для HTML5 аудиоплеера. Мой вопрос: если список воспроизведения очень длинный или высота каждого элемента песни / списка настолько велика, что не попадает в поле зрения экрана, как бы вы отредактировали код, чтобы элемент песни / списка воспроизведения, который находится в процессе играли всегда появляется в верхней части страницы? Другими словами, каким должен быть приведенный ниже код для того, чтобы страница автоматически прокручивалась до верха названия каждой песни во время ее воспроизведения?

скрипт:

    function audioPlayer(){
        var currentSong = 0;
        $("#audioPlayer")[0].src = $("#playlist li a")[0];
        $("#audioPlayer")[0].play();
        $("#playlist li a").click(function(e){
           e.preventDefault(); 
           $("#audioPlayer")[0].src = this;
           $("#audioPlayer")[0].play();
           $("#playlist li").removeClass("current-song");
            currentSong = $(this).parent().index();
            $(this).parent().addClass("current-song");
        });

        $("#audioPlayer")[0].addEventListener("ended", function(){
           currentSong++;
            if(currentSong == $("#playlist li a").length)
                currentSong = 0;
            $("#playlist li").removeClass("current-song");
            $("#playlist li:eq("+currentSong+")").addClass("current-song");
            $("#audioPlayer")[0].src = $("#playlist li a")[currentSong].href;
            $("#audioPlayer")[0].play();
        });
    }

с HTML следующим образом:

<style>
    #playlist{
        list-style: none;
    }
    #playlist li a{
        color:black;
        text-decoration: none;
        line-height: 300px; /* exaggerated height to force playing titles off screen */
    }
    #playlist .current-song a{
        color:blue;
    }
</style>

<p>Demo Music From <a href="http://incompetech.com">incompetech.com</a></p>
<audio src="" controls id="audioPlayer">
    Sorry, your browser doesn't support html5!
</audio>
<ul id="playlist">
    <li class="current-song"><a href="Exit%20the%20Premises.mp3">Exit the Premises</a></li>
    <li><a href="Severe%20Tire%20Damage.mp3">Severe Tire Damage</a></li>
    <li><a href="Broken%20Reality.mp3">Broken Reality</a></li>
</ul>
<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
<script src="audioPlayer.js"></script>
<script>
    // loads the audio player
    audioPlayer();
</script>