Устал искать lofi radio и сделал своё - с быстрой загрузкой и без рекламы
И с новогодним вкусом! Теперь хочу поделиться.
Может я плохо гуглю, но со мной такое было регулярно: ищу музыку для работы учёбы, а варианты либо с рекламой (она ещё и громко орёт), либо нестабильны, либо не работают в фоне.
В итоге (чукча не слушатель) я просто сделал себе своё lofi radio — без рекламы, работает в фоне, один клик и музыка играет.
А под Новый год решил поделиться с вами -> https://lofilofi.pages.dev.
Пользуясь случаем, добавил новогоднюю страницу с праздничными треками. А ещё там есть спецэффекты :))). Это чтобы можно было такую страницу не только фоном играть, но и оставить на включенном экране.
Секрет Полишинеля, но для меня стало открытием, что есть музыка, под которую можно работать и учиться, не отвлекаясь. Чего всем и желаю в Новом году!Если хотите добавить какой-то трек, который вам нравится для работы или учёбы, пишите — добавлю.
Так как тут сайт про технологии - расскажу как это делалось
Сначала думал про стримы и внешние API, но быстро понял — это нестабильно и долго загружается. Поэтому решил использовать локальные MP3 файлы и HTML5 Audio API. Загружаются мгновенно, работают в фоне, полный контроль над контентом.
Потом добавил управление: кнопки предыдущий/следующий трек, отображение времени, лайки (сохраняются локально, без бэкенда), автопереключение треков.
Как вы уже поняли для меня важно чтобы музыка начинала игать быстро - этому помогает PWA функциональность — можно установить как приложение через Chrome, Edge, работает офлайн. Service Worker кеширует аудио файлы (Cache First стратегия), так что даже без интернета всё играет.
Визуализация звука через Web Audio API — два canvas, симметричная визуализация от центра, градиенты в lofi-стиле. Выглядит красиво (я щетаю) и не отвлекает. Анимация только во время воспроизведения — экономит ресурсы.Конечно, присутствует мобильная версия.
Деплой: Cloudflare Pages, автоматический деплой из GitHub при push. Бесплатно, быстро. Файлы статические, никаких серверов не нужно. Подробнее про разработку.
Happy New Lofi Year y'all!