Как вставить аудио плеер html5 для Tilda

Создали ZeroBlock

Добавили в него 3 элемента html и задали им классы
catching-fire , mockingjay1 , mockingjay2

Добавили код в блок Другое - Т123
В этом коде указывается ссылки на файл (где можно разместить)
Ссылка соответствует классу элемента из 2го шага

Mo-ti Level Up

Видео инструкции по добавлению кода и работе с Zero Block.

Получить полное видео

Посмотреть все видео

Добавляем аудио плеер на страницу в ZeroBlock, загружаем файл на dropbox

Фрагмент видео

Посмотреть видео в личном кабинете ►

Библиотека примера


<script>
$(document).ready(function(){

let playList = {
  'catching-fire' : 'https://310401.selcdn.ru/MIXED/hunger_games-hanging_tree.mp3',
  'mockingjay1'   : 'https://310401.selcdn.ru/MIXED/TheHungerGames2.mp3',
  'mockingjay2'   : 'https://310401.selcdn.ru/MIXED/LordeFlickerTheHungerGames3.mp3'
};

for (var key in playList) {
        $('.'+key).find('.tn-atom').html('<audio preload="metadata"  controls controlsList="nodownload"><source src="'+playList[key]+'" type="audio/mpeg"></audio>');
};
    
let activeTrack = {};
document.querySelectorAll('audio').forEach(function(el){
  el.addEventListener('playing', function(){
    if (activeTrack.pause && activeTrack !== this)
      activeTrack.pause(); activeTrack = this;
  }); 
}); 
});
</script>
<style>
audio {
    height: 40px;
    width:100%;
    border-radius: 30px;
    box-shadow: 0 0 40px 0 rgb(62 62 62 / 44%);
}
audio::-webkit-media-controls-panel {
  background: #bdbdbd;
}
</style>