В Tilda нет своего аудио-плеера. Показываю, как добавить музыку или звук на сайт Tilda через HTML-код: где взять прямую ссылку на mp3, готовый код плеера и в чём ограничения.
Сразу важное: в Tilda нет отдельного блока «аудио-плеер». Добавить звук на страницу можно через блок с HTML-кодом — обычным тегом <audio>. Для этого нужна одна вещь: прямая ссылка на ваш mp3-файл. Разберём по шагам.
Что нужно сделать
Логика простая: разместить mp3 так, чтобы получить постоянную прямую ссылку на файл, и вставить в Tilda небольшой код, который покажет плеер. Всё.
Шаг 1. Получите прямую ссылку на mp3
Браузерному плееру нужен прямой адрес самого файла, а не ссылка на страницу-обёртку (поэтому ссылки из облачных дисков обычно не подходят — они ведут на просмотрщик, а не на файл). Загрузите mp3 в LF Drive и скопируйте прямую ссылку вида https://lfdrive.ru/f/КОД.
Шаг 2. Добавьте блок с кодом в Tilda
На странице нажмите «+», выберите блок «Другое» → «HTML-код» (T123) и вставьте:
<audio controls src="https://lfdrive.ru/f/ВАШ_КОД">
Ваш браузер не поддерживает аудио.
</audio>
Замените ВАШ_КОД на код из вашей ссылки. Атрибут controls показывает кнопки воспроизведения, перемотки и громкости.
Опубликуйте страницу — появится рабочий плеер. Вот как он выглядит (это стандартный плеер браузера):
Ограничения стандартного плеера
- Вид зависит от браузера. Нативный плеер выглядит по-разному в Chrome, Safari и Firefox — под дизайн сайта его почти не подогнать.
- Автозапуск со звуком заблокирован. Браузеры не дают включать звук сам по себе — только после действия пользователя. Это защита от назойливых сайтов, отключить нельзя.
- Нет обложки, названия трека, кастомных кнопок — только базовый набор.
Для простой задачи «дать послушать трек или подкаст» этого достаточно. Если же нужен красивый плеер под дизайн — с обложкой, своими кнопками и оформлением — это уже кастомное решение.
Красивый кастомный плеер
Стандартный <audio> не оформить под бренд. Для аккуратного плеера с дизайном есть готовая модификация — посмотрите в видео, как она выглядит и работает на реальной странице Tilda:
Где хранить mp3
Чтобы ссылка на аудио была постоянной и плеер не замолчал через месяц — держите файл в LF Drive. Загрузили — получили прямую ссылку для <audio>. Есть бесплатный тариф, чтобы попробовать.
Частые вопросы
Почему музыка не включается сама при заходе на сайт?
Это ограничение всех браузеров: автозапуск со звуком запрещён, пока пользователь не нажмёт кнопку. Обойти нельзя — можно только запустить звук после клика.
Можно ли загрузить mp3 прямо в Tilda?
Загрузка произвольных аудиофайлов с прямой ссылкой в Tilda ограничена, поэтому надёжнее держать mp3 на отдельном хостинге и подставлять прямую ссылку в тег <audio>.
Какой формат аудио использовать?
mp3 — он воспроизводится во всех браузерах. Для большинства задач этого достаточно.