HTML5 Custom Audio - уменьшение громкости не работает должным образом

Question

Привет, я собрал небольшой пользовательский аудиоплеер. Пока что у него есть кнопка воспроизведения / паузы и кнопки увеличения и уменьшения громкости.

Я могу увеличивать и уменьшать громкость нормально , но есть ошибка с уменьшением (-) кнопка: по мере того как я нажимаю на нее (и звук исчезает), я получаю следующее сообщение в консоли:

podcast3.html:103 Uncaught DOMException: 
Failed to set the 'volume' property on'HTMLMediaElement': 
    The volume provided (-0.1) is outside the range [0, 1].
    at decreaseVol (http://127.0.0.1:5500/podcast3.html:103:65)
    at HTMLButtonElement.<anonymous> (http://127.0.0.1:5500/podcast3.html:106:60)

Это код, который не работает:

    // Decrease Volume button
    const decreaseVol = () => {
        audioControls.volume !== 0 ? audioControls.volume -= 0.1 : null
    }
    const decreaseVolButton = document.querySelector('.voldownicon')
    decreaseVolButton.addEventListener('click', () => {decreaseVol()}) 

Изначально я получил подобное сообщение The volume provided (1.1) is outside the range [0, 1]., когда продолжал нажимать кнопку увеличить (+) громкости - вот исходный код:

// Increase Volume button
const increaseVol = () => {
    audioControls.volume += 0.1
}

Итак, я сделал это условным, и это сработало:

// Increase Volume button
const increaseVol = () => {
        audioControls.volume !== 1.0 ? audioControls.volume += 0.1 : null
    }

Возникла та же проблема с уменьшить (-) кнопка громкости заставил меня использовать условное: audioControls.volume !== 0 ? audioControls.volume -= 0.1 : null и для этого кода. Но это не работает - сообщение консоли: The volume provided (-0.1) is outside the range [0, 1] по-прежнему появляется после непрерывного нажатия кнопки.

Я предполагаю, что проблема заключается в условии audioControls.volume !== 1.0 ?. Однако я сильно изменил номер / оператор, и ничего не помогло.

FYI Вот весь код страницы:

<style>
    * {
        box-sizing: border-box;
    }

    body {
        background: white;
        margin: 0;
    }

    .podcast {
        width: 655px;
        height: 186px;
        display: block;
        position:relative;
        align-items: center;
        background: white url(audio-bg.png)no-repeat;
    }

    .audio-player {
        position: absolute;
        top:86px;
        left:-3px;
    }

    .audio-controls {
        padding:0;
        background:transparent;
        color: #f3194b;
        border:0;
        cursor: pointer;
        outline: none;
    }


    .audio-controls:hover {
        opacity: 0.8;
    }

    .audio-controls .plusminus {
        vertical-align: 50%;
        font-weight:bold;
        position:relative;
        left: -3px;
    }

</style>

<audio id="playerPodcast">
    <source src="test.mp3" type="audio/mpeg">
</audio>
<div class="podcast">
    <div class="audio-player">
        <button class="playpauseicons audio-controls"><i class="material-icons">play_arrow</i></button>
        <button class="voldownicon audio-controls"><i class="material-icons">volume_down</i><i class="plusminus">-</i></button>
        <button class="volupicon audio-controls"><i class="material-icons">volume_up</i><i class="plusminus">+</i></button>
    </div>

</div>


<script>
    // Get the controls from the <audio> tag
    const audioControls = document.querySelector("#playerPodcast")

    // Play/Pause buttons
    const playPauseIcons = document.querySelector('.playpauseicons')
    const togglePlayPause = () => {
        audioControls.paused ? audioControls.play() : audioControls.pause();
        playPauseIcons.innerHTML === '<i class="material-icons">play_arrow</i>' 
        ? playPauseIcons.innerHTML = '<i class="material-icons">pause</i>'
        : playPauseIcons.innerHTML = '<i class="material-icons">play_arrow</i>' 
    } 
    const playPauseLink = document.querySelector('.playpauseicons')
    playPauseLink.addEventListener('click', () => {togglePlayPause()})   



    // Decrease Volume button
    const decreaseVol = () => {

        audioControls.volume === 0 ? null : audioControls.volume -= 0.1
    }
    const decreaseVolButton = document.querySelector('.voldownicon')
    decreaseVolButton.addEventListener('click', () => {decreaseVol()}) 



    // Increase Volume button
    const increaseVol = () => {
        audioControls.volume !== 1.0 ? audioControls.volume += 0.1 : null
    }
    const increaseVolButton = document.querySelector('.volupicon')
    increaseVolButton.addEventListener('click', () => {increaseVol()}) 

</script>

Кто-нибудь знает, где я ошибаюсь?