CEO агентства
MBA, UTS Australia
13+ лет в маркетинге
Тимофей Белоглазов
Давайте подскажем,
как решить вашу задачу
(Оставить заявку)
Мы сделали 754 проекта и каждый из них уникальный, поэтому для старта нам важно познакомиться. Оставьте ваши контакты, а мы вам перезвоним в рабочее время.
Как добавить аудио на сайт в Tilda
/
/
Дата публикации: 23.04.2026

Как добавить аудио на сайт в Tilda

  • Сайты
7 мин
Менеджер проектов
Пять лет профессиональной практики в маркетинге и дизайне
Елизавета Шестакова
Автор статьи

Зачем вставлять аудио в Tilda

Звук — недооценённый инструмент в веб-дизайне. Он работает там, где текст и картинки не справляются: передаёт атмосферу, удерживает внимание, создаёт доверие.

Многие при создании сайтов не знают, как вставить аудио в Tilda, и упускают этот инструмент. А он реально работает в нескольких сценариях:
  • Музыкальные проекты и артисты — дать послушать трек прямо на странице, без переходов на стриминги.
  • Подкасты — разместить эпизод с плеером, чтобы слушатель не уходил с сайта.
  • Обучающие платформы — прикрепить аудиолекцию или озвучку к модулю курса.
  • Корпоративные и имиджевые сайты — добавить фоновую музыку или звуковой брендинг.
  • Агентства и студии — показать голосовое портфолио, демонстрацию озвучки, рекламные аудиоролики.

Tilda не имеет встроенного блока с загрузкой mp3 напрямую, но предоставляет несколько рабочих способов вставить аудио. Разберём каждый.

Способ 1: вставить аудио в Tilda через HTML-код

Приятная новость —  любой аудиоплеер с функцией «поделиться» можно вставить в Tilda через HTML-блок.

Подходящие сервисы:
  • Яндекс.Музыка — если трек уже есть в каталоге, нажмите «Поделиться» → «Встроить» и скопируйте iframe-код.
  • MixCloud — удобен для миксов, диджей-сетов, радиошоу. Поддерживает плейлисты.
  • Cincopa — профессиональный сервис для медиаконтента с кастомизируемым плеером.
  • Spotify — для подкастов, если эпизод уже опубликован на платформе.

Как вставить аудио в Tilda через HTML:
  1. В редакторе добавьте блок T123 «HTML-код» или HTML-виджет в Zero Block.
  2. Вставьте iframe-код вашего аудиосервиса.
  3. Сохраните и проверьте отображение в предпросмотре.

Способ 2: Вставить аудио в Tilda без сторонних сервисов

Так тоже можно. Если файл уже загружен на хостинг или CDN, используйте стандартный HTML5-тег:
<audio controls style="width:100%;">
  <source src="https://ваш-домен.ru/audio/track.mp3" type="audio/mpeg">
</audio>
Этот код вставляется в HTML-блок Tilda и работает без регистрации где-либо —  нужна только прямая ссылка на файл.

Способ 3: фоновое аудио через Zero Block

Если вы хотите, чтобы музыка начинала играть при открытии страницы — это реализуется через Zero Block и JavaScript. Технически вставить аудио в Tilda таким образом сложнее, но результат того стоит для имиджевых сайтов.
Важно: большинство современных браузеров блокируют автовоспроизведение со звуком без действия пользователя. Поэтому корректная реализация — запускать аудио по клику на кнопку или иконку.
Схема реализации:
  1. Откройте Zero Block в Tilda.
  2. Добавьте HTML-виджет с кодом:
<audio id="bg-audio" loop>
  <source src="https://ваш-домен.ru/audio/background.mp3" type="audio/mpeg">
</audio>
<button onclick="document.getElementById('bg-audio').play()" 
   style="background:none; border:none; cursor:pointer; font-size:24px;">
  🔊 Включить звук
</button>
Это даёт пользователю контроль — он сам решает, слушать или нет. Такое поведение браузеры не блокируют.

Готовые модификации и сервисы для HTML5-аудио в Tilda

Если разбираться с кодом самостоятельно не хочется, можно воспользоваться готовыми решениями — разработчики сделали специальные моды и плагины именно под Tilda.

  1. klimchukovy.ru/audio_tilda — мод с управлением прямо на странице: кнопка включения/выключения и регулировка громкости. Подходит, если нужен аккуратный плеер без лишних зависимостей.
  2. mo-ti.ru/html5audioplayer — HTML5-плеер с готовой инструкцией по установке в Tilda. Вставляется через HTML-блок, работает с любым mp3-файлом по прямой ссылке.
  3. postnikovmd.com/mods/media/audio — мод от разработчика Tilda-решений. Расширенные настройки отображения и поведения плеера на странице.
  4. nolim.cc/music-on — сервис с фоновой музыкой и управлением воспроизведением. Работает по подписке, зато не требует технических знаний — настраивается через интерфейс.

Сравнение способов

Практические советы

  • Оптимизируйте файл перед тем, как вставить аудио в Tilda. Формат MP3 с битрейтом 128−192 kbps даёт хорошее качество при разумном размере. Для фоновой музыки хватит 96 kbps.
  • Не включайте автовоспроизведение без согласия пользователя. Это раздражает, снижает поведенческие показатели и часто блокируется браузером. Исключение — тихая фоновая музыка с очевидным интерфейсом для отключения.
  • Дублируйте в текст. Если аудио несёт смысловую нагрузку (обучение, инструкции), добавьте расшифровку — это плюс к SEO и доступности.
  • Проверяйте на мобильных. iOS и Android ведут себя по-разному при работе с аудио. Тестируйте на реальных устройствах, особенно если вставляете аудио через HTML.
  • Используйте CDN для собственных файлов. Если храните mp3 на хостинге, подключите CDN — это ускорит загрузку и снизит нагрузку на сервер.

Итог

Вставить аудио в Tilda проще, чем кажется. Если есть свой файл или нужен конкретный сервис или свой файл — подключаете через HTML-блок. Для фонового звука с кастомным управлением — Zero Block и пара строк JavaScript.

Главное правило: выбирайте способ под задачу. Хотите встроить подкаст — iframe с платформы. Добавить атмосферу на лендинг — HTML5 audio с кнопкой запуска.
Созвонимся на 30 минут, чтобы обсудить вашу задачу и ответить на вопросы. Вышлем вам презентацию с аналогичными кейсами и примерной стоимостью

Получите персональное коммерческое предложение под вашу задачу

Поделиться статьей в соц. сетях

Свежие статьи