Как сделать soundButton в ZeroBlock в Tilda

<!-- Прописываем наши плееры и ссылки на аудио файлы.. -->
<audio id="my_sound1"><source src="https://310401.selcdn.ru/links/Zvuk_-_vinil.mp3"></audio>
<audio id="my_sound2"><source src="https://310401.selcdn.ru/links/the-acoustic-guitar-troubadours.mp3"></audio>
<audio id="my_sound3"><source src="https://310401.selcdn.ru/links/zvuk_-_barabany.mp3"></audio>
<audio id="my_sound4"><source src="https://310401.selcdn.ru/links/violin.mp3"></audio>


<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
        // Обработка элементов с ссылками на звуки
            document.querySelectorAll("a[href^='#playsound']").forEach(function(elem) {
                let parent = elem.closest('.tn-elem');
                if (parent) {
                    parent.setAttribute('data-play-attr', elem.getAttribute('href'));
                    parent.classList.add('playbtnbg');
                    elem.removeAttribute('href');
                }
            });

            document.querySelectorAll("a[href^='#stopsound']").forEach(function(elem) {
                let parent = elem.closest('.tn-elem');
                if (parent) {
                    parent.setAttribute('data-stop-attr', elem.getAttribute('href'));
                    parent.classList.add('stopbtnbg');
                    elem.removeAttribute('href');
                }
            });

            let btnLink = 0;
            let soundMax = null;

            // Функция смены кнопок 
            function hideshowbtn() {
                document.querySelectorAll('.playbtnbg').forEach(function(btn) {
                    btn.classList.remove('hide-buton');
                });
                
                document.querySelectorAll('.stopbtnbg').forEach(function(btn) {
                    btn.classList.add('hide-buton');
                });
            };

            // Обработчики для кнопок play
            document.addEventListener('click', function(e) {
                const playBtn = e.target.closest('.playbtnbg');
                if (playBtn) {
                    e.preventDefault();
                    hideshowbtn();
                    
                    btnLink = playBtn.getAttribute('data-play-attr').split('_')[1];
                    soundMax = document.getElementById("my_sound" + btnLink);
                    soundMax.play();
                    
                    playBtn.classList.add('hide-buton');
                    
                    const stopBtn = document.querySelector("[data-stop-attr='#stopsound_" + btnLink + "']");
                    if (stopBtn) stopBtn.classList.remove('hide-buton');
                }
            });

            // Обработчики для кнопок stop
            document.addEventListener('click', function(e) {
                const stopBtn = e.target.closest('.stopbtnbg');
                if (stopBtn) {
                    e.preventDefault();
                    hideshowbtn();
                    
                    btnLink = stopBtn.getAttribute('data-stop-attr').split('_')[1];
                    soundMax = document.getElementById("my_sound" + btnLink);
                    soundMax.pause();
                    
                    stopBtn.classList.add('hide-buton');
                    
                    const playBtn = document.querySelector("[data-play-attr='#playsound_" + btnLink + "']");
                    if (playBtn) playBtn.classList.remove('hide-buton');
                }
            });

            // Функция прерывания трека
            document.querySelectorAll('audio').forEach(function(audio) {
                audio.addEventListener('play', function() {
                    document.querySelectorAll('audio').forEach(function(a) {
                        if (a !== audio && !a.paused) {
                            a.classList.add('stoped');
                            a.classList.remove('playing');
                            a.pause();
                        }
                    });
                    
                    audio.classList.remove('stoped');
                    audio.classList.add('playing');
                });
            });

            // Регулировка громкости
            const recElement = document.getElementById('rec166116037');
            if (recElement) recElement.classList.add('speaker');

            document.addEventListener('change', function(e) {
                if (e.target.matches('input[name="Range"]')) {
                    const findVol = e.target.value;
                    document.querySelectorAll('audio').forEach(function(audio) {
                        audio.volume = findVol / 100;
                    });
                }
            });

            // Показ/скрытие регулятора громкости
            document.addEventListener('click', function(e) {
                const speaker = document.querySelector('.speaker');
                if (!speaker) return;
                
                if (e.target.closest('.playbtnbg')) {
                    speaker.style.display = 'block';
                    setTimeout(function() {
                        speaker.style.opacity = 1;
                    }, 10);
                } else if (e.target.closest('.stopbtnbg')) {
                    speaker.style.opacity = 0;
                    setTimeout(function() {
                        speaker.style.display = 'none';
                    }, 500);
                }
            });

            // Сброс кнопок при завершении воспроизведения
            document.querySelectorAll('audio').forEach(function(audio) {
                audio.addEventListener('ended', function() {
                    document.querySelectorAll('.playbtnbg').forEach(function(btn) {
                        btn.classList.remove('hide-buton');
                    });
                });
            }); 
 
    })();    
});    
</script>


<style>
.t-range__interval-txt {display: none !important;}
.speaker{
   display:none;    
   position:fixed;
   bottom:0;
   z-index:999999;
}
.hide-buton{
    opacity: 0;
    pointer-events: none !important;
    
}
.playbtnbg,
.stopbtnbg{
    cursor: pointer;
}
</style>