Как добавить аудио в Zero Block Tilda

Бывает, что на сайт необходимо добавить аудио, но стандартные решения не подходят. Как сделать это легко, красиво и без знания кода? Делимся своим способом.

Создаем Zero Block, наполняем его нужным контентом и добавляем две кнопки: "Play" - для начала проигрывания записи и "Stop" - для того, чтобы остановить воспроизведение. Можете добавить кнопки в виде графических иконок, как в нашем примере.

Для всех элементов ВЫКЛЮЧАЕМ параметр «Lazyload».

Для элемента «play» прописываем ссылку "#playsound_1". Если у вас планируется несколько кнопок с музыкой, то на другие кнопки можете добавлять "#playsound_2" , "#playsound_3" и т.д.
Для элементов «stop» прописываем ссылки #stopsound_1 , #stopsound_2 , #stopsound_3 и т.д.

Сохраняем и выходим из редактора Zero Block.

Сам аудиофайл предварительно необходимо загрузить в какое-нибудь облако, например, Dropbox. Ссылка на файнл нам понадобится чуть позже.

Далее вам необходимо добавить на страницу блок T123, который и будет содержать код для проигрывания аудиозаписи. Скопируйте код ниже и добавьте в этот блок.

<!-- Как сделать soundButton в ZeroBlock в Tilda mo-ti.ru --><script src="https://static.tildacdn.com/js/jquery-1.10.2.min.js" charset="utf-8" onerror="this.loaderr='y';"></script>
<!-- Прописываем наши плееры и ссылки на аудио файлы.. -->
<audio id="my_sound1"><source src="ССЫЛКА НА МУЗЫКУ НА ФАЙЛООБМЕННИКЕ"></audio>

<script>
$( document ).ready(function() {
    
$("a[href^='#playsound']").each(function(){
    let elem = $(this);
    let parent = elem.closest('.tn-elem');
    parent.attr('data-play-attr', elem.attr('href')).addClass('playbtnbg');
    elem.removeAttr('href');
});

$("a[href^='#stopsound']").each(function(){
    let elem = $(this);
    let parent = elem.closest('.tn-elem');
    parent.attr('data-stop-attr', elem.attr('href')).addClass('stopbtnbg');
    elem.removeAttr('href');
});
    

let btnLink=0;
let soundMax=0;

//Создаём функцию смены кнопок 
function hideshowbtn(){
    $('.playbtnbg').removeClass('hide-buton'); 
    $('.stopbtnbg').addClass('hide-buton'); 
};

//Прописываем события при клике на play
$(".playbtnbg").click(function(e){e.preventDefault();hideshowbtn();
btnLink = $(this).attr('data-play-attr');btnLink = btnLink.split('_')[1];
soundMax = document.getElementById("my_sound"+btnLink);soundMax.play();
$(this).addClass('hide-buton');
$("[data-stop-attr='#stopsound_"+btnLink+"']").removeClass('hide-buton');
});

//Прописываем события при клике на stop
$(".stopbtnbg").click(function(e) {e.preventDefault();hideshowbtn();
btnLink = $(this).attr('data-stop-attr');btnLink = btnLink.split('_')[1];
soundMax = document.getElementById("my_sound"+btnLink);soundMax.pause();
$(this).addClass('hide-buton');
$("[data-play-attr='#playsound_"+btnLink+"']").removeClass('hide-buton');
    
});

//Функция прерывания трека
$(function() { 
$('audio').on('play', function() { 
$('audio').addClass('stoped').removeClass('playing'); 
$(this).removeClass('stoped').addClass('playing'); 
$('.stoped').each(function() { 
    $(this).trigger('pause'); 
}) }) });

//Регулировка громкости     
$('#rec166116037').addClass('speaker');

$(".tn-atom__form").on('change', 'input[name="Range"]', function() {
    var findVol = $(this).val(); $('audio').prop("volume", findVol/100);   
});

$(".playbtnbg").click(function(e){e.preventDefault();$('.speaker').fadeIn(500);});
$(".stopbtnbg").click(function(e){e.preventDefault();$('.speaker').fadeOut(500);});

$("audio").on("ended", function() {
    $('.playbtnbg').removeClass('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>

Далее вам необходимо поменять ссылку на аудиозапись на вашу. Обратите внимание на код ниже. Всё, что находится в кавычках заменяем на вашу ссылку. Вот в этой строке:

<!-- Прописываем наши плееры и ссылки на аудио файлы.. -->
<audio id="my_sound1"><source src="ССЫЛКА НА МУЗЫКУ НА ФАЙЛООБМЕННИКЕ"></audio>

Готово - вы великолепны! Публикуйте страницу и тестируйте работу новых элементов. Обратите внимание: в предпросмотре Tilda блоки с кодом НЕ РАБОТАЮТ!

Вот, что у нас в итоге получилось!

Если у вас что-то не получилось или вы хотите это делегировать - пишите нам!

Мы много лет создаём и поддерживаем сайты на Tilda.

Подробнее об услуге

Портфолио