Как сделать soundButton в ZeroBlock в Tilda
Free Shipping On All Orders Over $100
Support Anytime 123-456-7890
Login
Welcome To Our Music Store
From Starters To Pro…
Here you'll find a huge range of musical equipments of some of the biggest world's famous brands.
SHOP NOW
Keyboards & Digital Pianos
New In Keyboards
Shop Now
Musican's Lifestyle
Om Every Brand
Mega Sale
Shop Now
Best Sellers
🛒 SELECT OPTIONS
Crosley Cruiser Portable 3-Speed Turntable
🛒 SELECT OPTIONS
Gibson Custom L5 Premier Acoustic Guitar
🛒 SELECT OPTIONS
🛒 SELECT OPTIONS
Tama S.L.P. Big Black Steel Snare Drum
Handcrafted Blue Acoustic Violin

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

1
Создали ZeroBlock
2
Добавили в него 4 Image c иконкой Stop и прописали им ссылки
#stopsound_1 , #stopsound_2 , #stopsound_3 , #stopsound_4
3
Добавили в него 4 Image c иконкой Play и прописали им ссылки
#playsound_1 , #playsound_2 , #playsound_3 , #playsound_4
4
Отключили иконкам LazyLoad
5
Добавили скрипт на страницу
Скрипт вставляется в блок Другое - Т123

В коде прописали ссылки на аудио файлы
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Как сделать soundButton в ZeroBlock в Tilda
Создаём кнопки для управления звуком в Zero и регулятор громкости. Длительность видео 23 мин
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера

<!-- Прописываем наши плееры и ссылки на аудио файлы.. -->
<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 ).ready(function() {
//Добавляем классы для наших кнопок управления
$("a[href^='#playsound']").addClass('playbtnbg');
var btnLink=0;
var soundMax=0;
$("a[href^='#stopsound']").addClass('stopbtnbg').hide();
//Создаём функцию смены кнопок 
function hideshowbtn(){$('.playbtnbg').show();$('.stopbtnbg').hide(); };
//Прописываем события при клике на play
$("a[href^='#playsound']").click(function(e){e.preventDefault();hideshowbtn();
btnLink = $(this).attr('href');btnLink = btnLink.split('_')[1];
soundMax = document.getElementById("my_sound"+btnLink);soundMax.play();
$(this).hide(400);$("a[href='#stopsound_"+btnLink+"']").show(400);});
//Прописываем события при клике на stop
$("a[href^='#stopsound']").click(function(e) {e.preventDefault();hideshowbtn();
btnLink = $(this).attr('href');btnLink = btnLink.split('_')[1];
soundMax = document.getElementById("my_sound"+btnLink);soundMax.pause();
$(this).hide(400);$("a[href='#playsound_"+btnLink+"']").show(400);});
//Функция прерывания трека
$(function() { 
$('audio').on('play', function() { 
$('audio').addClass('stoped').removeClass('playing'); 
$(this).removeClass('stoped').addClass('playing'); 
$('.stoped').each(function() { $(this).trigger('pause'); 
//$(this)[0].currentTime = 0;
 }) }) }); 
//Регулировка громкости     
    $('#rec138215669').addClass('speaker');
      $(".tn-atom__form").on('DOMSubtreeModified', ".t-range__value-txt", function() {
     var findVol = $(this).html(); $('audio').prop("volume", findVol/100);   });
$("a[href^='#playsound']").click(function(e){e.preventDefault();$('.speaker').fadeIn(500);});
$("a[href^='#stopsound']").click(function(e){e.preventDefault();$('.speaker').fadeOut(500);});
$("audio").on("ended", function() {$('.playbtnbg').show(400);});});
</script>
<style>
.t-range__interval-txt {display: none !important;}
.speaker{
   display:none;    
   position:fixed;
   bottom:0;
   z-index:999;
}
</style>
Made on
Tilda