<!-- Code by Fedyaeva -->
<audio id="my_sound1">
     <source src="https://dl1.i-tsmusic.com/192/19535.mp3" type="audio/mpeg">
</audio>
<audio id="my_sound2">
     <source src="https://dl1.i-tsmusic.com/192/19535.mp3" type="audio/mpeg">
</audio>
<script>
document.addEventListener("DOMContentLoaded",function(){
    let playSound = document.querySelectorAll('.playsound');
    let stopSound = document.querySelectorAll('.stopsound');
    let audio = document.querySelectorAll('audio');
    let allLink = document.querySelectorAll('a');
    // 0.6 - изначальная громкость
    audio.forEach((el) => el.volume = 0.6);
    history.pushState("", document.title, window.location.pathname);
    
    $('a').click(function(e){
	    var anch = this.hash.slice(0);
	    if(!anch || !anch[0] === "#") return;
	    e.preventDefault();
	    window.location.hash = '';
	    if(history.pushState) { history.pushState({}, null, window.location.pathname); }
    });
    
    let btnLink = 0;
    let soundMax = 0;
    
    // скрываю все кнопки стоп
    stopSound.forEach((btn) => btn.closest('.stopsound').style.visibility = "hidden");
    
    function changeButton () {
        playSound.forEach((btn) => btn.style.visibility = "visible");
        stopSound.forEach((btn) => {btn.style.visibility = "hidden"; if (btn.closest('.uc-stop-button')) {btn.closest('.uc-stop-button').removeAttribute("style")}});
    }
    
    playSound.forEach((btn) => {
        btn.addEventListener('click', () => {
            changeButton ();
            btnLink = event.target.closest('a').href.split('_')[1];
            soundMax = document.querySelector('#my_sound' + btnLink);
            soundMax.play();
            event.target.closest('.playsound').style.visibility = "hidden";
            document.querySelectorAll('a[href*="#stopsound_'+ btnLink +'"]').forEach((el) => {el.closest('.stopsound').style.visibility = "visible"; if (el.closest('.uc-stop-button')) {el.closest('.uc-stop-button').style.zIndex = "100";}});
        });
    });
    
    stopSound.forEach((btn) => {
        btn.addEventListener('click', () => {
            changeButton ();
            btnLink = event.target.closest('a').href.split('_')[1];
            soundMax = document.querySelector('#my_sound' + btnLink);
            soundMax.pause();
            event.target.closest('.stopsound').style.visibility = "hidden";
            if (event.target.closest('.uc-stop-button')) {event.target.closest('.uc-stop-button').removeAttribute("style");}
            document.querySelector('a[href*="#playsound_'+ btnLink +'"]').closest('.stopsound').style.visibility = "visible";
        });
    });
    
    $(function() { 
        $('audio').on('play', function() { 
            $('audio').addClass('stoped').removeClass('playing'); 
            $(this).removeClass('stoped').addClass('playing'); 
            $('.stoped').each(function() { $(this).trigger('pause'); 
            }) 
        }) 
    }); 
});
</script>
<style>
.uc-stop-button {position: fixed;bottom: 0;left: 0;width: 100%;}
</style>