lofiradio
Дневник разработки
О проекте
Боль: Хочется просто включить музыку и работать, но все существующие решения либо с рекламой, либо нестабильны, либо не работают в фоне. Google выдает "Lofi radio", но первая ссылка часто не работает, потом надо слушать рекламу. YouTube не работает фоном. Нужно что-то простое — один клик и музыка играет.
Отсюда появилась мысль: сделать свой простой плеер без рекламы, который работает в фоне.
А дальше?
Сначала думал о стримах и внешних API, но быстро пришли к пониманию, что это нестабильно и долго загружается.
Главное сейчас — получить стабильное решение без рекламы.
Поэтому идея упростилась до локальных MP3 файлов и простого HTML5 плеера:
Читать далееТекущая реализация на: https://lofilofi.pages.dev
Оглавление
Создание базового функционала
Что было
Нужно было создать простое решение для прослушивания lofi музыки без рекламы и задержек.
Решение
Создан простой веб-плеер с локальными MP3 файлами вместо стримов.
Почему такое решение
- Локальные файлы загружаются мгновенно (без задержек)
- Нет зависимости от внешних стримов (которые могут быть нестабильны)
- Полный контроль над контентом
- Работает в фоне (HTML5 Audio API)
Плюсы
- ✅ Быстрая загрузка треков
- ✅ Стабильная работа
- ✅ Без рекламы
- ✅ Работает в фоне
- ✅ Простой интерфейс (одна кнопка Play)
Минусы
- ❌ Нужно хранить файлы (но 5-10 треков это нормально)
- ❌ Ограниченный набор треков (но можно добавлять)
Что сделано
- Создан HTML5 Audio плеер
- Добавлены локальные MP3 файлы
- Реализована кнопка Play/Pause
- Настроена автоматическая загрузка треков
Добавление функций управления
Что было
Базовый плеер работал, но не хватало удобства управления.
Решение
Добавлены:
- Кнопки предыдущий/следующий трек
- Отображение времени трека (currentTime / duration)
- Кнопка лайка с сохранением в localStorage
- Автопереключение треков
Почему такое решение
- Стандартные функции любого плеера
- Лайки сохраняются локально (не нужен бэкенд)
Плюсы
- ✅ Удобное управление
- ✅ Видно сколько времени играет
- ✅ Можно отмечать любимые треки
- ✅ Автоматическое переключение
Минусы
- ❌ Лайки только локально (не синхронизируются между устройствами)
Подводные камни
- Нужно было правильно обработать события audio (timeupdate, loadedmetadata)
Что сделано
- Добавлены кнопки управления (предыдущий/следующий)
- Отображение времени трека
- Кнопка лайка с сохранением
- Автопереключение треков
Расширение функциональности и улучшение UX
Что было
Базовый плеер работал, но нужно было улучшить пользовательский опыт и добавить функции для привлечения большего количества пользователей. Проект был одностраничным, без мультиязычности, без дополнительного контента.
Решение
Добавлен комплекс улучшений: мультиязычность (RU/EN), новогодние тематические страницы, блог-статьи, PWA функциональность, визуализация звука, мини-плеер для блога, отдельные страницы для треков и SEO оптимизация.
Почему такое решение
- Мультиязычность расширяет аудиторию и улучшает SEO для международных запросов
- Новогодние страницы создают сезонный контент и привлекают трафик в праздничное время
- Блог-статьи помогают с SEO и дают дополнительный контент для пользователей
- PWA позволяет установить приложение и работать офлайн
- Визуализация звука улучшает визуальный опыт и делает плеер более привлекательным
- Мини-плеер для блога позволяет слушать музыку прямо в статьях
- Отдельные страницы для треков улучшают SEO и дают прямые ссылки на композиции
- SEO оптимизация (Schema.org, sitemap, мета-теги) помогает в поисковой выдаче
Плюсы
- ✅ Значительно улучшен пользовательский опыт
- ✅ Расширена аудитория за счет мультиязычности
- ✅ Улучшено SEO и видимость в поисковиках
- ✅ Добавлен сезонный контент (новогодние страницы)
- ✅ PWA функциональность - можно установить как приложение
- ✅ Визуализация делает плеер более привлекательным
- ✅ Блог создает дополнительную ценность для пользователей
Минусы
- ❌ Увеличилась сложность проекта (больше файлов, больше кода)
- ❌ Нужно поддерживать контент на двух языках
- ❌ Блог требует регулярного обновления для SEO
- ❌ Service Worker добавляет сложность в отладке
- ❌ Больше файлов для деплоя
Подводные камни
- Важно было правильно организовать структуру папок для мультиязычности
- Service Worker нужно было правильно настроить для кеширования аудио
- Визуализация звука требовала оптимизации производительности
- SEO мета-теги нужно было синхронизировать между языками
