HTML5 miniPlayer

<html>
<head>
    <title>xBattle Player</title>
    <script type="text/javascript">
        window.onload = function () {
            var player = new Audio;
            var bplay = document.getElementById('play');
            var bnext = document.getElementById('next');
            var bprev = document.getElementById('prev');
            var bvolum = document.getElementById('volume');
            var ctitle = document.getElementById('title');
            var list = [
                    ['piesa1.mp3','Nume1'],
                    ['piesa2.mp3','Nume2'],
                    ['piesa3.mp3','Nume3']
                   ];
            var curTack = 0;


            function Change(track) {
                player.setAttribute('src', list[track][0]);
                ctitle.innerText = list[track][1];
                ctitle.style.display = 'inherit';
                setTimeout(function(){
                    ctitle.style.display = 'none';
                },3000);
                player.play();
                bplay.src = "img/pause.png";
            }


            player.volume = 0.7;

            bplay.addEventListener("click", function() {
                if (player.paused) {
                    if (player.currentSrc == '') Change(0);
                    player.play();
                    bplay.src = "img/pause.png";
                } else {
                    player.pause();
                    bplay.src = "img/play.png";
                }
            }, false);

            bnext.addEventListener("click", function() {
                if (curTack+1 == list.length) curTack = 0; else curTack++;
                Change(curTack);
            }, false);

            bprev.addEventListener("click", function() {
                if (curTack == 0) curTack = list.length-1; else curTack--;
                Change(curTack);
            }, false);

            bvolum.addEventListener("change", function() {
                player.volume = this.value/100;
            }, false);

            player.addEventListener("ended", function() {
                bnext.click();
            }, false);

            bplay.click();
        }
    </script>
    <style type="text/css">
#player {
    background: #fff;
    border: #444 1px solid;
    width: 120px;
    padding: 3px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 9999;
}

#player:hover > #title  {
    display:inherit;
}

#title {
    display: none;
    font-family: Tahoma;
    font-size: 10px;
    white-space:nowrap;
    overflow:hidden;
}

#player #buttons {
    margin-top: 2px;
}

#player img:hover {
    background: #ccc;
}

#player input[type='range'] {
    -webkit-appearance: none !important;
    background:black;
    height:2px;
    width: 60px;
    margin-top: 4px;
    position: absolute;
    bottom: 10px;
    right: 5px;
}

#player #play {
    margin-right: 5px;
    margin-left: 5px;
}

#player input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background: #333;
    height: 6px;
    width: 9px;
}
    </style>
</head>
<body>
    <div id="player">
        <div id="title"></div>

        <div id="buttons">
            <img src="img/play.png" id="play"/>
            <img src="img/prev.png" id="prev"/>
            <img src="img/next.png" id="next"/>
        </div>

        <div id="slider">
            <input id="volume" type="range" min="0" value="70" max="100" step="1" />
        </div>
    </div>
</body>
</html>