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

Пример модификации

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

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

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

Как создать свой аудиоплеер и загрузить аудиофайлы в 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»

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

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

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. Скопируйте в него последнюю часть кода и опубликуйте страницу

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

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

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

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

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