Дата публикации: 23.04.2026
Как добавить аудио на сайт в Tilda
- Сайты
7 мин
Менеджер проектов
Пять лет профессиональной практики в маркетинге и дизайне
Елизавета Шестакова
Автор статьи
Зачем вставлять аудио в Tilda
Звук — недооценённый инструмент в веб-дизайне. Он работает там, где текст и картинки не справляются: передаёт атмосферу, удерживает внимание, создаёт доверие.
Многие при создании сайтов не знают, как вставить аудио в Tilda, и упускают этот инструмент. А он реально работает в нескольких сценариях:
Tilda не имеет встроенного блока с загрузкой mp3 напрямую, но предоставляет несколько рабочих способов вставить аудио. Разберём каждый.
Многие при создании сайтов не знают, как вставить аудио в Tilda, и упускают этот инструмент. А он реально работает в нескольких сценариях:
- Музыкальные проекты и артисты — дать послушать трек прямо на странице, без переходов на стриминги.
- Подкасты — разместить эпизод с плеером, чтобы слушатель не уходил с сайта.
- Обучающие платформы — прикрепить аудиолекцию или озвучку к модулю курса.
- Корпоративные и имиджевые сайты — добавить фоновую музыку или звуковой брендинг.
- Агентства и студии — показать голосовое портфолио, демонстрацию озвучки, рекламные аудиоролики.
Tilda не имеет встроенного блока с загрузкой mp3 напрямую, но предоставляет несколько рабочих способов вставить аудио. Разберём каждый.
Способ 1: вставить аудио в Tilda через HTML-код
Приятная новость — любой аудиоплеер с функцией «поделиться» можно вставить в Tilda через HTML-блок.
Подходящие сервисы:
Как вставить аудио в Tilda через HTML:
Подходящие сервисы:
- Яндекс.Музыка — если трек уже есть в каталоге, нажмите «Поделиться» → «Встроить» и скопируйте iframe-код.
- MixCloud — удобен для миксов, диджей-сетов, радиошоу. Поддерживает плейлисты.
- Cincopa — профессиональный сервис для медиаконтента с кастомизируемым плеером.
- Spotify — для подкастов, если эпизод уже опубликован на платформе.
Как вставить аудио в Tilda через HTML:
- В редакторе добавьте блок T123 «HTML-код» или HTML-виджет в Zero Block.
- Вставьте iframe-код вашего аудиосервиса.
- Сохраните и проверьте отображение в предпросмотре.
Фото: сайт «Яндекс Музыка»
Фото: сайт «Tilda Publishing»
Фото: страница на конструкторе сайтов «Tilda Publishing»
Способ 2: Вставить аудио в Tilda без сторонних сервисов
Так тоже можно. Если файл уже загружен на хостинг или CDN, используйте стандартный HTML5-тег:
<audio controls style="width:100%;">
<source src="https://ваш-домен.ru/audio/track.mp3" type="audio/mpeg">
</audio>Этот код вставляется в HTML-блок Tilda и работает без регистрации где-либо — нужна только прямая ссылка на файл.
Фото: сайт «Tilda Publishing»
Фото: страница на конструкторе сайтов «Tilda Publishing»
Способ 3: фоновое аудио через Zero Block
Если вы хотите, чтобы музыка начинала играть при открытии страницы — это реализуется через Zero Block и JavaScript. Технически вставить аудио в Tilda таким образом сложнее, но результат того стоит для имиджевых сайтов.
Важно: большинство современных браузеров блокируют автовоспроизведение со звуком без действия пользователя. Поэтому корректная реализация — запускать аудио по клику на кнопку или иконку.
Схема реализации:
- Откройте Zero Block в Tilda.
- Добавьте 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>Это даёт пользователю контроль — он сам решает, слушать или нет. Такое поведение браузеры не блокируют.
Фото: сайт «Tilda Publishing»
Фото: сайт «Tilda Publishing»
Фото: страница на конструкторе сайтов «Tilda Publishing»
Готовые модификации и сервисы для HTML5-аудио в Tilda
Если разбираться с кодом самостоятельно не хочется, можно воспользоваться готовыми решениями — разработчики сделали специальные моды и плагины именно под Tilda.
- klimchukovy.ru/audio_tilda — мод с управлением прямо на странице: кнопка включения/выключения и регулировка громкости. Подходит, если нужен аккуратный плеер без лишних зависимостей.
- mo-ti.ru/html5audioplayer — HTML5-плеер с готовой инструкцией по установке в Tilda. Вставляется через HTML-блок, работает с любым mp3-файлом по прямой ссылке.
- postnikovmd.com/mods/media/audio — мод от разработчика Tilda-решений. Расширенные настройки отображения и поведения плеера на странице.
- nolim.cc/music-on — сервис с фоновой музыкой и управлением воспроизведением. Работает по подписке, зато не требует технических знаний — настраивается через интерфейс.
Сравнение способов
| Способ | Сложность | Необходимость регистрации | Для чего подходит |
|---|---|---|---|
| HTML-плеер (iframe) | Средняя | Зависит от сервиса | Подкасты, миксы, лекции |
| HTML5 audio тег | Средняя | Нет | Любой файл с прямой ссылкой |
| Фоновое аудио (Zero Block) | Высокая | Нет | Имиджевые сайты, лендинги |
Практические советы
- Оптимизируйте файл перед тем, как вставить аудио в Tilda. Формат MP3 с битрейтом 128−192 kbps даёт хорошее качество при разумном размере. Для фоновой музыки хватит 96 kbps.
- Не включайте автовоспроизведение без согласия пользователя. Это раздражает, снижает поведенческие показатели и часто блокируется браузером. Исключение — тихая фоновая музыка с очевидным интерфейсом для отключения.
- Дублируйте в текст. Если аудио несёт смысловую нагрузку (обучение, инструкции), добавьте расшифровку — это плюс к SEO и доступности.
- Проверяйте на мобильных. iOS и Android ведут себя по-разному при работе с аудио. Тестируйте на реальных устройствах, особенно если вставляете аудио через HTML.
- Используйте CDN для собственных файлов. Если храните mp3 на хостинге, подключите CDN — это ускорит загрузку и снизит нагрузку на сервер.
Итог
Вставить аудио в Tilda проще, чем кажется. Если есть свой файл или нужен конкретный сервис или свой файл — подключаете через HTML-блок. Для фонового звука с кастомным управлением — Zero Block и пара строк JavaScript.
Главное правило: выбирайте способ под задачу. Хотите встроить подкаст — iframe с платформы. Добавить атмосферу на лендинг — HTML5 audio с кнопкой запуска.
Главное правило: выбирайте способ под задачу. Хотите встроить подкаст — iframe с платформы. Добавить атмосферу на лендинг — HTML5 audio с кнопкой запуска.
Созвонимся на 30 минут, чтобы обсудить вашу задачу и ответить на вопросы. Вышлем вам презентацию с аналогичными кейсами и примерной стоимостью
Получите персональное коммерческое предложение под вашу задачу
Поделиться статьей в соц. сетях
