Tilda PublishingПодписка

Как добавить аудиофайлы в Zero Block Tilda. Создаем свой аудиоплеер

Аудиофайлы в Zero Block Tilda

В современном мире создание интернет-сайта становится всё более доступным, и благодаря инновационным платформам, таким как Tilda, задача становится даже проще. Однако, когда дело доходит до добавления аудиофайлов, некоторые могут столкнуться с трудностями. В данной статье мы рассмотрим, как легко и быстро добавить аудиофайлы в Zero Block Tilda.

Мы шаг за шагом рассмотрим, как создать не просто блок с музыкой, а целый аудиоплеер, взаимодействие с которым будет полностью контролироваться вами. Мы будем использовать Zero Block в Tilda, применим CSS для придания стиля и добавим долю волшебства с помощью JavaScript.

Как создать свой аудиоплеер и загрузить аудиофайлы в zero block tilda

аудиофайлы в Zero Block Tilda

Прежде чем приступить, убедитесь, что ваш аудиофайл имеет поддерживаемый формат. Tilda поддерживает распространенные форматы, такие как MP3, WAV и OGG. Выберите тот, который соответствует вашим потребностям. После этого:

  1. Создайте zero block
  2. Удалите из него лишние элементы
  3. Нажмите на кнопку «+» и выберите «Add HTML»
  4. Расположите этот html элемент за пределами видимой области зеро блока
  5. Откройте html элемент и скопируйте в него первую часть кода (код найдете в конце статьи)
  6. Откройте LF Cloud – хостинг файлов с прямой ссылкой на скачивание
  7. Загрузите на хостинг свой аудио файл и скопируйте полученную ссылку на него
  8. Снова откройте html элемент с кодом и вставьте скопированную ссылку в атрибут «src»

Как создать интерфейс управления аудиоплеером

аудиофайлы в Zero Block Tilda

После того, как вы добавили в зеро блок свой аудио файл, вам нужно создать кнопки управления плеером. Для этого:

  1. Создайте любые элементы в качестве кнопок, например иконки, которые подходят дизайну вашего Тильда сайта
  2. Для кнопки «Play» правой кнопкой мыши выберите «Add CSS Class Name»
  3. В появившемся поле введите «playButton»
  4. Для кнопки «Pause» введите класс «pauseButton»
  5. Для кнопки «Stop» введите класс «stopButton»

Кроме кнопок управления мы создадим еще прогресс бар с таймером и ползунок управления громкостью музыки. Для этого:

  1. Все в том же зеро блоке создайте еще один html элемент и скопируйте в него вторую часть кода
  2. В этом элемент будет находиться прогресс бар. Вы можете его стилизовать под свой дизайн и расположить его в любом удобном вам месте. Ширина прогресс бара будет равняться ширине html элемента
  3. Чтобы создать ползунок громкости, добавьте еще один html элемент и скопируйте в него третью часть кода
  4. Стилизация и позиционирование аналогичны прогресс бару
  5. Сохраните изменения и выйдите из зеро блока
  6. После всех блоков на странице создайте html блок «Т123»
  7. Скопируйте в него последнюю часть кода и опубликуйте страницу

Код доступен только тем, кто зарегистрировался и оплатил подписку
Подписка стоит 400 руб./мес. или 1500 руб. в год
Покупая подписку, ты получаешь:

– доступ ко всем уникальным модификациям
– отключение всей рекламы на сайте
– неограниченный размер загружаемых файлов в LF Cloud

Оформить подписку

Аудио файлы в Zero Block Tilda: Заключение

Добавление аудиофайлов в Zero Block Tilda – это простой процесс, который приносит максимум удовольствия пользователям вашего сайта. Не забывайте экспериментировать с различными эффектами и настройками, чтобы сделать ваш контент ещё более привлекательным.

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

Смотрите обучающие видео уроки по Тильде тут

Читайте также: Пагинация в Tilda

6 комментариев для “Как добавить аудиофайлы в Zero Block Tilda. Создаем свой аудиоплеер

Добавить комментарий