Javascript музыкальный проигрыватель ведет себя странно

Question

У меня несколько проблем со следующим кодом.

<audio id="player" autoplay loop >
    <source id="mp3Source" src="" type="audio/mp3">
</audio>

<script>
var vid = document.getElementById('player');
vid.volume = 0.3;
function loadSong(songNo) {
    var mp3Source = document.getElementById('mp3Source');
    mp3Source.src = 'songs/' + songNo + '.mp3';
};
$(window).keydown(function(evt) {
    if (evt.which == 107) {
        if (vid.volume < 1) {
            vid.volume = Math.max( Math.ceil((vid.volume + 0.1) * 10) / 10)
        }
    }
    if (evt.which == 109) {
        if (vid.volume > 0) {
            vid.volume = Math.max( Math.ceil((vid.volume - 0.1) * 10) / 10)
        }
    }
    if (evt.which == 32) {
        vid.volume = 0
    }
    if (evt.which == 97) {
        loadSong(1)
    }
    if (evt.which == 98) {
        loadSong(2)
    }
});
</script>

Теперь, первая проблема заключается в том, что вы играете с клавишами (+ / -), когда вы нажимаете + несколько раз, а затем спам -vid.volume застрянет с тем же номером с плавающей точкой и не опустится ниже этого числа, но все равно будет идти выше.Вторая проблема в том, что я редко слышу музыку в браузере, кажется, что она случайная?Я не уверен, что с моим кодом что-то не так или все должно работать.

Подводя итог, можно сказать, что при игре с клавишами (-) клавиша застревает, а громкость не уменьшается, а при открытии файла .html музыка не воспроизводится в браузере, а воспроизводится только в случайном порядке (если вы обновляете илифайл перезапуска)