Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
#2470a1
Как вставить аудио плеер html5 для Tilda
catching-fire
mockingjay1
mockingjay2

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

1
Создали ZeroBlock
2
Добавили в него 3 элемента html и задали им классы
catching-fire , mockingjay1 , mockingjay2
3
Добавили код в блок Другое - Т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>
Made on
Tilda