Отправить заявку
Наш канал
О нас
Услуги
Кейсы
Статьи
Обучение
Наши видео
Главная
Наш канал

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

Бывает, что на сайт необходимо добавить аудио, но стандартные решения не подходят. Как сделать это легко, красиво и без знания кода? Делимся своим способом.
Создаем Zero Block, наполняем его нужным контентом. В ту область, куда нужно добавить аудио, добавляем блок "Код HTML".
Кликаем правой кнопкой мыши по элементу "Код HTML", выбираем "Add CSS Class Name". Справа появляется поле, в котором мы можем дать название класса для нашего элемента. Мы назвали "audio1". Запоминаем это слово, записываем в блокнотик или куда-то ещё. На нашей странице будет несколько аудио. Все они будут с "audio", но каждая со своим номером - audio1, audio2 и т.д. Рекомендуем вам использовать те же названия, что и у нас, чтобы далее вам не пришлось вносить много изменений в код.
Если вы планируете несколько аудио на своей странице, как мы, то выходим из Zero Block, сохраняя изменения, и добавляем на страницу новый блок T123 (HTML-код), в который будем добавлять код для отображения и проигрывания аудио. Если аудио на странице планируется всего одно, то добавить код вы можете прямо в элемент в Zero Block, кликнув в настройках элемента "Edit code".

У нас несколько аудио, поэтому мы создаём новый блок T123 (HTML-код) и добавляем в него следующий код:

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

      let audioList = {
        'audio1' : 'https://www.dropbox.com/s/61au3msjadstg8f/Get%20Started%20with%20Dropbox%20Paper.url?dl=0',
        'audio2' : 'https://www.dropbox.com/s/61au3msjadstg8f/Get%20Started%20with%20Dropbox%20Paper.url?dl=0',
        'audio3' : 'https://www.dropbox.com/s/61au3msjadstg8f/Get%20Started%20with%20Dropbox%20Paper.url?dl=0'
      };

      for (let track in audioList) {
              $('.' + track).find('.tn-atom').html('<audio preload="metadata"  controls controlsList="nodownload"><source src="'+audioList[track] + '" type="audio/mpeg"></audio>');
      };
          
      let activeAudio = {};
      let audioElems = document.querySelectorAll('audio');

      for(let i = 0; i < audioElems.length; i++) {
        audioElems[i].addEventListener('playing', function() {
          if (activeAudio.pause && activeAudio !== this)
            activeAudio.pause(); 
            activeAudio = 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>
Сами аудиофайлы предварительно необходимо загрузить в какое-нибудь облако, например, Dropbox или Google Disk. Обратите внимание на код ниже, в него вам необходимо внести изменения. Как вы догадались "audio1" и есть названия css-классов, которые мы добавляли в Zero block, а ссылки после двоеточия - ссылки на аудио файлы в облаке. Отредактируйте этот код под свои названия и ссылки. Лишние строки удалите из этого списка.

let audioList = {
        'audio1' : 'https://www.dropbox.com/s/61au3msjadstg8f/Get%20Started%20with%20Dropbox%20Paper.url?dl=0',
        'audio2' : 'https://www.dropbox.com/s/61au3msjadstg8f/Get%20Started%20with%20Dropbox%20Paper.url?dl=0',
        'audio3' : 'https://www.dropbox.com/s/61au3msjadstg8f/Get%20Started%20with%20Dropbox%20Paper.url?dl=0'
      };
Готово - вы великолепны! Публикуйте страницу и тестируйте работу новых элементов. Обратите внимание: в предпросмотре Tilda блоки с кодом НЕ РАБОТАЮТ!

Для того чтобы внести изменения в дизайн элемента (цвет фона, высота, ширина, обводка элемента), отредактируйте код в теге <style>. Для просмотра изменений, необходимо также опубликовать страницу.

<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>
А вот, что получилось в итоге у нас!
Если у вас что-то не получилось или вы хотите это делегировать - пишите нам!
Мы много лет создаём и поддерживаем сайты на Tilda.