Radio Player для Tilda - Пример

🎵 Radio Player для Tilda

📋 Инструкция по установке

Для Tilda Zero:

  1. Скопируйте код плеера в блок "HTML"
  2. Создайте контейнер с id="radio-player"
  3. Настройте параметры в коде
  4. Опубликуйте сайт

Для Tilda с кодом:

  1. Добавьте скрипт в раздел "Настройки сайта" → "Футер"
  2. Создайте контейнер в нужном месте
  3. Инициализируйте плеер с параметрами

🚀 Быстрый старт

<!-- 1. Подключите скрипт -->
<script src="https://your-domain.com/radio-player.js"></script>
<!-- 2. Создайте контейнер -->
<div id="radio-player"></div>
<!-- 3. Инициализируйте плеер -->
<script>
new RadioPlayer('radio-player', {
streamUrl: 'http://your-radio.com:8000/live',
stationName: 'Моя Радиостанция',
stationDescription: 'Прямой эфир 24/7',
theme: 'dark',
size: 'medium'
});
</script>

🎨 Демо плееров

Темная тема (по умолчанию)

Светлая тема

Минималистичная тема

Маленький размер

Большой размер

⚙️ Настройки

new RadioPlayer('container-id', {
// URL потока (обязательно)
streamUrl: 'http://localhost:8000/live',
// Backup поток (опционально)
backupUrl: 'http://localhost:8000/backup',
// Название станции
stationName: 'Моя Радиостанция',
// Описание станции
stationDescription: 'Прямой эфир 24/7',
// Автовоспроизведение
autoPlay: false,
// Показывать регулятор громкости
showVolume: true,
// Показывать информацию о треке
showInfo: true,
// Тема: 'dark' | 'light' | 'minimal'
theme: 'dark',
// Размер: 'small' | 'medium' | 'large'
size: 'medium'
});

✨ Возможности

🎵 Воспроизведение

HTML5 аудио плеер с поддержкой MP3 потоков

🔄 Backup поток

Автоматическое переключение на резервный поток

🎨 Темы оформления

Темная, светлая и минималистичная темы

📱 Адаптивность

Автоматическая адаптация под размер экрана

🔊 Управление громкостью

Слайдер громкости и кнопка отключения звука

📊 Статус в реальном времени

Индикатор состояния и информация о треке

⚡ Быстрая загрузка

Легкий код без внешних зависимостей

🔗 Прямые ссылки

Кнопка для открытия потока в новом окне

📝 Код для Tilda

HTML блок (T0):

<div id="radio-player"></div>
<script src="https://your-domain.com/radio-player.js"></script>
<script>
new RadioPlayer('radio-player', {
streamUrl: 'http://your-radio.com:8000/live',
backupUrl: 'http://your-radio.com:8000/backup',
stationName: 'Моя Радиостанция',
stationDescription: 'Прямой эфир 24/7',
theme: 'dark',
size: 'medium',
showVolume: true,
showInfo: true
});
</script>

Для футера сайта (Tilda):

<script src="https://your-domain.com/radio-player.js"></script>

Инициализация в нужном месте:

<script>
document.addEventListener('DOMContentLoaded', function() {
new RadioPlayer('radio-player', {
streamUrl: 'http://your-radio.com:8000/live',
stationName: 'Моя Радиостанция',
theme: 'dark'
});
});
</script>

🛠️ API методы

// Получить экземпляр плеера
const player = new RadioPlayer('container-id', options);
// Получить статус
const status = player.getStatus();
console.log(status); // { isPlaying: true, volume: 0.8, ... }
// Управление воспроизведением
player.play();
player.pause();
player.togglePlay();
// Управление громкостью
player.setVolume(0.5); // 50%
player.toggleMute();
// Уничтожить плеер
player.destroy();