Как воспроизвести звук при клике на кнопку в Zero Block?

Модификация поможет создать свои кастомные кнопки при клике на которые можно проигрывать свой звук на Tilda. Дополнительно можно добавить Lottie анимацию при проигрывании звука.

Модификация работает с включенным Autoscale в блоках

Модификация работает только с Zero Block

Номер модификации в библиотеке TiCode

Генератор кода

поделиться модификацией

Ссылка на mp3

Класс для кнопки Play

Класс для кнопки Stop

Зацикливание звука

Добавить Lottie анимацию

войти

Войдите в аккаунт чтобы получить доступ к генератору кода

регистрация

оплатить

Этот генератор кода доступен только тем кто оплатил подписку

Настройки Lottie анимации

Класс анимации

Ссылка на json анимацию

Скорость анимации

КОПИРОВАТЬ КОД АНИМАЦИИ

<script> $(document).ready(function () { let TiCodeSrcAudio = 'https://www.dl.dropboxusercontent.com/s/k8k1vrhb5dpvp4i/test.mp3?dl=0'; let TiCodeLottieAnimation = 'https://assets10.lottiefiles.com/private_files/lf30_k2RVBb.json'; let TiCodePlay = '.tc-play'; let TiCodeStop = '.tc-stop'; let TiCodeAudio = new Audio(TiCodeSrcAudio); let TiCodeAnimation = null; let TiCodeIsLooping = false; let TiCodeAnimationSpeed = 1; let TiCodeAnimationContainer = document.getElementById('ti-player'); $(TiCodePlay).click(function() { if (TiCodeAnimation) { TiCodeAnimation.play(); } TiCodeAudio.play(); TiCodeHide($(this)); TiCodeShow($(TiCodeStop)); }); $(TiCodeStop).click(function() { if (TiCodeAnimation) { TiCodeAnimation.pause(); } TiCodeAudio.pause(); TiCodeHide($(this)); TiCodeShow($(TiCodePlay)); }); TiCodeAudio.onended = function() { if (TiCodeIsLooping) { TiCodeAudio.currentTime = 0; TiCodeAudio.play(); } else { TiCodeHide($(TiCodeStop)); TiCodeShow($(TiCodePlay)); } }; function TiCodeHide(element) { element.animate({ opacity: 0 }, 200, function() { element.hide(); }); } function TiCodeShow(element) { element.show().animate({ opacity: 1 }, 200); } $('#toggle-loop').click(function() { TiCodeIsLooping = !TiCodeIsLooping; $(this).toggleClass('active'); }); }); </script> <style> .tc-stop { opacity: 0; cursor: pointer; } .tc-play { cursor: pointer; } </style>

КОПИРОВАТЬ КОД

Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта

1. Загружаем mp3 на Dropbox, так как Тильда не разрешает хранить аудио у себя. Если нет аккаунта Dropbox, то создаем по ссылке. Получаем прямую ссылку на аудио из Dropbox. Для этого копируем ссылку на видео и меняем в ней dropbox.com на dl.dropboxusercontent.com
Вставляем ссылку в генератор кода в поле "ссылка на mp3"

2. В Zero Block создаем два элемента(это могут быть шейпы, кнопки, текст или картинки). Элементам назначаем классы tc-play и tc-stop
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
Важно! Элемент с классом tc-play должен в слоях находиться выше tc-stop

3. При необходимости настраиваем дополнительные параметры:
Зацикливание аудио - можно включить или выключить повтор аудио.

Добавить Lottie анимацию - можно добавить анимацию которая будет воспроизводиться при включении звука. Для добавления анимации нужно:
3.1 Создать в Zero Block HTML элемент и скопировать в него код кнопкой "копировать код анимации". Размер html элемента делаем 1 к 1. Например 300 на 300 пикселей. Внутри этого элемента и будет отображаться наша анимация.
3.2 Указать ссылку в генераторе на json файл анимации. Анимацию лучше залить на Dropbox и указать прямую ссылку на анимацию с заменой на dl.dropboxusercontent.com как в пункте 1.

Анимации можно взять на Lottiefiles Там собрано множество бесплатных анимаций и прямые ссылки можно брать прямо с сервиса не заливая анимацию на свой Dropbox

3.3 В поле "скорость анимации" можно дополнительно указать скорость. Стандартное значение 1.

4. Копируем готовый код и вставляем в HTML блок Т123.