Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
Установка фонового звука с управлением для Tilda

Caitlin De Ville

Attention (Charlie Puth) - Electric Violin Studio Cover

Установка фонового звука с управлением для Tilda

1
Создали ZeroBlock
2
Добавили в него 2 иконки и задали им классы playbgmusic и stopbgmusic
(отключили им LazyLoad)
3
Добавили код в блок Другое - Т123
В коде прописали ссылку на файл mp3
Библиотека для примера
<audio id="bg-sound">
   <source src="https://310401.selcdn.ru/MIXED/caitlin-de-ville-attention.mp3">
</audio>

<script>
(function () { 
    document.addEventListener("DOMContentLoaded", function() {
        const myAudio = document.getElementById("bg-sound");
        const fadeTime = 300;//Врямя смены иконок
        myAudio.volume = 0.4;//Задаём громкость
        
        const stopBtn = document.querySelector('.stopbgmusic');
        const playBtn = document.querySelector('.playbgmusic');
        
        stopBtn.classList.add('hide-btn');
        
        playBtn.addEventListener('click', function(event) {
            myAudio.play();
            this.classList.toggle('hide-btn');
            stopBtn.classList.toggle('hide-btn');
        });
        
        stopBtn.addEventListener('click', function(event) {
            myAudio.pause();
            this.classList.toggle('hide-btn');
            playBtn.classList.toggle('hide-btn');
        });
        
        myAudio.addEventListener('ended', function(event) {
            playBtn.classList.remove('hide-btn');
            stopBtn.classList.add('hide-btn');
        });
    
    });
})();
</script>
<style>
div[class*="bgmusic"] { 
    cursor: pointer;
    z-index:99 !important;
}
.hide-btn{
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}
</style>
Made on
Tilda