Sound on/off icon with fade out on scroll

<script>
  document.addEventListener("DOMContentLoaded", function () {
    let audio = document.getElementById("audio");
    let audioButton = document.querySelector('.audio-button'); // Change the class accordingly
    let maxScroll = document.body.scrollHeight - window.innerHeight; // Maximum scroll height

    // Play/Pause Audio on Button Click
    audioButton.addEventListener('click', function () {
        if (audio.paused) {
            audio.volume = 1; // Reset volume when playing
            audio.play();
            audioButton.classList.remove('paused'); 
            audioButton.classList.add('playing');
        } else {
            audio.pause();
            audioButton.classList.remove('playing'); 
            audioButton.classList.add('paused'); 
        }
    });

    // Scroll Event to Fade Out Audio
    window.addEventListener("scroll", function () {
        let scrollPos = window.scrollY; // Current scroll position
        let fadeFactor = 1 - (scrollPos / maxScroll) * 2; // Calculate volume (1 at top, 0 at bottom)

        audio.volume = Math.max(0, fadeFactor); // Ensure volume is not negative
    });
});
    </script>

    <audio id="audio" src="/wp-content/uploads/2024/11/Musique-pour-la-video.wav"></audio>


CSS za ikonice: https://prnt.sc/c55AFIklCS2r

selector.audio-button .play-icon {
    display: none;
    visibility: hidden;
}
selector.audio-button.playing .play-icon {
    display: inline;
    visibility: visible;
}
selector.audio-button.playing .mute-icon {
    display: none;
    visibility: hidden;
}