Free Shipping On All Orders Over $100
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.
Keyboards & Digital Pianos
New In Keyboards
Shop Now
Musican's Lifestyle
Om Every Brand
Mega Sale
Shop Now
Best Sellers
Crosley Cruiser Portable 3-Speed Turntable
Gibson Custom L5 Premier Acoustic Guitar
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. Добавили скрипт на страницу
Скрипт вставляется в блок ДРУГОЕ►Т123

В коде прописали ссылки на аудио файлы
<!-- Прописываем наши плееры и ссылки на аудио файлы.. -->
<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>
//Присваиваем переменным значения наших плееров
mysound1=document.getElementById("my_sound1");
mysound2=document.getElementById("my_sound2");
mysound3=document.getElementById("my_sound3");
mysound4=document.getElementById("my_sound4");

//Добавляем классы для наших кнопок управления
$("a[href^='#playsound']").addClass('playbtnbg');
$("a[href^='#stopsound']").addClass('stopbtnbg').hide();

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

//Прописываем события при клике на кнопки 1
$("a[href='#playsound_1']").click(function(e){e.preventDefault();hideshowbtn();
mysound1.play();$(this).hide(400);$("a[href='#stopsound_1']").show(400);});
$("a[href='#stopsound_1']").click(function(e) {e.preventDefault();
mysound1.pause();$(this).hide(400);$("a[href='#playsound_1']").show(400);});
//Прописываем события при клике на кнопки 2
$("a[href='#playsound_2']").click(function(e){e.preventDefault();hideshowbtn();
mysound2.play();$(this).hide(400);$("a[href='#stopsound_2']").show(400);});
$("a[href='#stopsound_2']").click(function(e) {e.preventDefault();
mysound2.pause();$(this).hide(400);$("a[href='#playsound_2']").show(400);});
//Прописываем события при клике на кнопки 3
$("a[href='#playsound_3']").click(function(e){e.preventDefault();hideshowbtn();
mysound3.play();$(this).hide(400);$("a[href='#stopsound_3']").show(400);});
$("a[href='#stopsound_3']").click(function(e) {e.preventDefault();
mysound3.pause();$(this).hide(400);$("a[href='#playsound_3']").show(400);});
//Прописываем события при клике на кнопки 4
$("a[href='#playsound_4']").click(function(e){e.preventDefault();hideshowbtn();
mysound4.play();$(this).hide(400);$("a[href='#stopsound_4']").show(400);});
$("a[href='#stopsound_4']").click(function(e) {e.preventDefault();
mysound4.pause();$(this).hide(400);$("a[href='#playsound_4']").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; }) }) }); 

</script>
Made on
Tilda