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

Бывает, что на сайт необходимо добавить аудио, но стандартные решения не подходят. Как сделать это легко, красиво и без знания кода? Делимся своим способом.
Создаем Zero Block, наполняем его нужным контентом и добавляем две кнопки: "Слушать" - для начала проигрывания записи и "Стоп" - для того, чтобы остановить воспроизведение.
Кликаем правой кнопкой мыши по одной из кнопок, выбираем "Add CSS Class Name". Справа появляется поле, в котором мы можем задать название класса для нашей кнопки. Вот как это сделано у нас:

Class:
1) Для кнопки Play - playbgmusic
2) Для кнопки Stop - stopbgmusic

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

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

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

<audio id="bg-sound">
   <source src="https://dl.dropbox.com/s/jc2bubl77oezd2k/15.-%D0%9C%D0%BE%D1%80%D0%B5-%D0%B6%D0%B4%D0%B5%D1%82-%E2%80%94-%D0%BC%D0%BE%D1%80%D0%B5-%D0%B7%D0%BD%D0%B0%D0%B5%D1%82.mp3?dl=0">
</audio>
<script>
$(document).ready(function(){
myAudio=document.getElementById("bg-sound");
let fadeTime = 300;//Врямя смены иконок
myAudio.volume=0.4;//Задаём громкость
$(".stopbgmusic").hide();
$(".playbgmusic").click(function(e) {
    myAudio.play(); $(this).fadeOut(fadeTime);
    $(".stopbgmusic").fadeIn(fadeTime);
})
$(".stopbgmusic").click(function(e) {e.preventDefault();
    myAudio.pause();  $(this).fadeOut(fadeTime);
    $(".playbgmusic").fadeIn(fadeTime);
});
$("#bg-sound").on("ended", function() {
    $(".stopbgmusic").fadeOut(fadeTime);
    $(".playbgmusic").fadeIn(fadeTime);
});
});
</script>
<style>
div[class*="bgmusic"] { 
    cursor: pointer;
    z-index:99 !important;
}
</style>
Далее вам необходимо поменять ссылку на аудиозапись на вашу. Обратите внимание на код ниже. Всё, что находится в кавычках заменяем на вашу ссылку. Вот в этой строке:

 <source src="https://dl.dropbox.com/s/jc2bubl77oezd2k/15.-%D0%9C%D0%BE%D1%80%D0%B5-%D0%B6%D0%B4%D0%B5%D1%82-%E2%80%94-%D0%BC%D0%BE%D1%80%D0%B5-%D0%B7%D0%BD%D0%B0%D0%B5%D1%82.mp3?dl=0">

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

Вот, что у нас в итоге получилось!
Если у вас что-то не получилось или вы хотите это делегировать - пишите нам!
Мы много лет создаём и поддерживаем сайты на Tilda.