Как я создал хоррор-радио на чистом HTML, которое играет 24/7 и работает даже на телефоне
Привет, DTF!
Представьте: вы заходите на сайт, видите мигающий экран старого телевизора, красные неоновые лампы, эффект статики и слышите мрачную музыку. И она не выключается, сколько бы вы ни пытались. Добро пожаловать на NITRO RADIO — радиостанцию в стиле хоррор, которая играет 24/7 без остановки.
Я создал этот проект на чистом HTML, CSS и JavaScript и залил на Netlify. И сегодня хочу рассказать, как это сделал, с какими сложностями столкнулся и как решил главную проблему — автозапуск на телефонах.
Идея родилась спонтанно: я хотел сделать сайт с атмосферой заброшенной радиостанции, где в 3 часа ночи крутят только треки Nitroasus — мрачный дарк-поп с индустриальным звучанием.
Ключевые фишки:
- Старый телевизор с эффектом «снега» (статики)
- Красные неоновые лампы, которые пульсируют
- Строка развёртки, как на старых ЭЛТ-экранах
- Полноценный плеер с прогресс-баром, громкостью и управлением
- Плейлист из 16 треков
- Работает 24/7 без остановки
На ПК всё работало идеально — радио включалось автоматически через 1.5 секунды после загрузки. Но на телефонах (особенно в Safari) браузеры блокируют автозапуск аудио до тех пор, пока пользователь не коснётся экрана.
Ошибка в консоли: NotAllowedError: play() failed because user didn't interact with document first
Решение:
Я добавил механизм, который:
- Пытается автоматически запустить радио
- Если браузер блокирует — показывает сообщение «КОСНИТЕСЬ ЭКРАНА ДЛЯ ЗАПУСКА»
- Добавляет слушатели событий click, touchstart и keydown
- Как только пользователь касается экрана — радио запускается
Для хостинга я выбрал Netlify. Это бесплатно, просто и быстро. Просто перетащил папку с проектом — и сайт готов.
Почему Netlify:
- Бесплатный SSL-сертификат (HTTPS)
- Автоматический деплой из GitHub
- Быстрая доставка контента (CDN)
- Никаких ограничений на трафик
Сайт уже работает. Заходите, включайте, наслаждайтесь атмосферой:
Я хотел создать максимально атмосферный опыт. Но дизайн — штука субъективная.
Как вам?
- Что бы вы добавили или изменили в интерфейсе?
- Может быть, знаете другие треки Nitroasus, которые стоит добавить?
- Или у вас есть идеи, как усилить хоррор-эффект?
Буду рад любым комментариям и идеям! :)