AutoFMShift

Псс парень... ловишь шипение в эфире? Заставь свою иномарку петь по-русски без регистрации и СМС, подобрав правильный FM-адаптер для своего города. 📻🤫

Веб-приложение для расчета оптимального сдвига частот (FM-адаптера) для автомобильных магнитол с нестандартным диапазоном частот (например, JDM).

🚀 Запустить AutoFMShift

📻 Проблемы?

Владельцы автомобилей, привезенных в РФ из Японии или других регионов, часто сталкиваются с проблемой прослушивания местного FM-радио на оригинальном головном устройстве (ГУ, магнитоле), например диапазоны:

• Стандарт РФ/Европа: 87.5 – 108.0 МГц.
• Япония (до 2014): 76.0 – 90.0 МГц.
• Япония (Wide FM): 76.0 – 95.0 МГц.

Из-за этого, например, родная японская магнитола физически не может принимать российские радиостанции на частотах выше 90 (или 95, 99) МГц, которых в крупных городах подавляющее большинство.

Решение: Использование FM-адаптера (frequency shifter), который врезается в антенный провод. Он аппаратно вычитает из частоты станции определенный сдвиг (например, 12 или 20 МГц), позволяя станции "попасть" в диапазон магнитолы.

Сложность: В разных городах разные частотные сетки. Если взять случайный адаптер, часть станций может всё равно не попасть в диапазон (или уйти ниже 76 МГц).

Цель приложения: Показать частоты всех станций выбранного города, доступные на рынке сдвиги адаптеров и подсветить те, которые позволяют покрыть до 100% станций, а также выбрать лучший. Дополнительно - выбрать любимые станции и номера кнопок, некоторые с доступным потоком - послушав, чтобы сохранить или распечатать для восстановления после сбросов или смены авто.

✨ Что почём

• Списки FM станций городов России: Загрузка актуальных частот и названий станций для городов России с Radiopedia Fandom, остальная информация про станции и аудио-потоки - с Radio-Browser.info. Если доступ к Radiopedia упал или поменял вёрстку - приложение перестанет подхватывать свежие данные, но сможет работать с данными в локальном кэше или из резервного JSON.
• Шаблоны ГУ: Предустановленные диапазоны частот FM магнитол для разных авто-рынков (РФ, JDM, USA, OIRT) с возможностью ручного ввода.
• Расчет покрытия местных FM частот адаптеров:
  • 🟢 Зеленый — лучший сдвиг (покрывает все станции и по возможности кратен 10).
  • ⚪ Белый — покрывает 100% станций.
  • 🟡🔴 От желтого к красному — покрывает только часть станций (градиент зависит от процента покрытия).
  • 🩷 Розовый — станции недоступны.
• 🔧 Расширенный режим настроек ГУ:
  • Включается кнопкой с гаечным ключом. Позволяет указать количество бэндов (наборов FM1, FM2, ...) и кнопок сохраненных станций в магнитоле.
  • Статусы станций: Кликайте по иконкам в таблице, чтобы отмечать любимое (♥), интересное (★) или пропущенное (⊘ — исключается из экспорта и перемотки в плеере).
  • Номера кнопок: Назначайте станциям номера кнопок (1, 2, ... или 1.1, 1.2, ...) через выпадающий список. Система запоминает абсолютные индексы, позволяя менять конфигурацию бэндов на лету без потери привязок для того, чтобы настроить примерно одинаково магнитолы нескольких машин.
• 🔄 Режимы приложения (Настройка / Плеер): Кнопка переключения режима . Настройка — основной режим, показывает все частоты, сдвиги и позволяет редактировать кнопки магнитолы. Плеер — упрощенный интерфейс для прослушивания: скрывает поля ввода частот, панель адаптера, колонку "На ГУ" и кнопки экспорта, оставляя только список станций с их статусами и кнопками плэй. Идеально для оценки станций.
• 📻 Онлайн-плеер: Встроенный аудиоплеер в шапке (вверху) приложения для оценочного прослушивания эфира станций через интернет. Управляется системными медиа-кнопками (Play/Next/Prev) или кнопками в шапке. Плеер автоматически перебирает доступные потоки и позволяет их переключать.
• 🎛️ Визуальная шкала-тюнер (FM Dial): Над списком станций отображается интерактивная шкала частот. Она показывает доступные (зеленые) и недоступные (красные) диапазоны с учетом адаптера, отметки станций (с подсветкой любимых и интересных), а также индикатор текущей частоты. При наведении или касании появляются всплывающие "баллоны" с лого, жанрами и частотой станции. Шкалу можно сжимать до реальных частот города или разворачивать на весь FM-диапазон. Можно переключить на частоты, которые поддерживает магнитола (выбранные в настройках мин и макс частоты). Можно включить панель кнопок для управления и быстрой настройки.
• 🎛️ Панель управления и кнопки магнитолы: Под шкалой находится панель с крутилкой громкости (с управлением колесиком/свайпом), кнопками управления плеером и кнопками статусов. Главная фишка — цифровые кнопки-пресеты [1], [2] и т.д. Долгое удержание такой кнопки присваивает её текущей играющей станции (как в реальной магнитоле), а простой тап — включает назначенную станцию. Поддерживаются бэнды (FM1, FM2, ...). Тут кнопки перемотки переключают станции по номерам кнопок, а не по частотам как в шапке.
• Экспорт данных в режиме настройки:
  • PNG: Растровая картинка для просмотра с экрана устройства.
  • PDF: Текстовая таблица для просмотра, копирования и печати.
  • XLSX: Формат для правки и печати на 1 лист А4 ч/б принтера.
  • JSON: Формат для сохранения резервной копии настроек, позволит запустить приложение с сохраненными городами без интернета.
• Инструкция настройки кнопок: Список частот в PNG/PDF/XLSX - по порядку с номерами кнопок для быстрой настройки магнитолы.
• GeoIP: Автоопределение города пользователя по IP при первом заходе или по кнопке.
• 🔗 Поделиться ссылкой: URL содержит город, диапазон частот ГУ, сдвиг адаптера, проигрываемую станцию. Ссылки, сгенерированные кнопкой "Поделиться", помечаются флагом: при переходе по ним плеер открывается на нужной станции, но не пытается запустить звук автоматически, ожидая ручного нажатия.
• 🔄 Копирование настроек между городами: Умный перенос статусов (♥, ★, ⊘) и номеров кнопок из одного города в другой. Встроенный алгоритм ищет умные совпадения по названиям станций.
• 💾 Экспорт / Импорт (JSON) и Офлайн-режим: Резервное копирование настроек и списков станций для настроенных городов в один файл. Импорт (из окна справки) восстанавливает настройки и списки станций на других устройствах. Списки станций и городов кэшируются в современном браузере (LocalStorage), позволяя работать с приложением даже при падении API.
• **🧠 Умная синхронизация. Позволяет автоматически переносить ваши статусы и номера кнопок при переименовании станций на API и миграции по частотам.
• 🛡️ Резервный кэш API (backup-api.json): Возможность сформировать полный бэкап всех городов и станций с живого API, включен на расписании github action. При падении основного API приложение автоматически переключается на этот резерв, подтягивая недостающие города и сохраняет ваши настройки.
• 📱 Адаптивность и тач-UI: На сенсорных экранах поля ввода поддерживают жест свайпа вверх/вниз прямо по полю для смены числовых значений, на ПК - колесиком мышки. При снижении ширины экрана строки таблицы станций превращаются в компактные карточки, а кнопки управления плеером переносятся на отдельную строку шапки для удобства нажатия пальцем. На узких экранах кнопки в шапке автоматически прячутся в выпадающее меню ☰ для экономии места.
• 🧹 Гибкий сброс кэша: Возможность сбросить станции только для текущего города (сохранив общие настройки) или выполнить полный сброс приложения.

🛠 Ситуация

Проект на чистом HTML5, CSS3 и Vanilla JS (ES6+) написан с GLM 5.2. Никаких React-ов и сборщиков, работает без регистраций и бэкэнда.

• CSS: Использование CSS Variables для светлой и темной темы (автовыбор через prefers-color-scheme), Flexbox/Grid для адаптивной верстки, медиазапросы для тач-устройств.
• JS: Асинхронные запросы (Fetch API), парсинг HTML через DOMParser, работа с LocalStorage и History API. Библиотеки: GeoJS, jsPDF, exceljs. Внедрен собственный модуль (fmuse.js) для "умного" сопоставления названий станций при переносе настроек и синхронизации. Используется MediaSession API для управления плеером с клавиатуры/гарнитуры.
• Архитектура - простой одностраничник (SPA) без роутинга, обновляющий UI через функцию render().

🌐 Кого знаем

Приложение использует открытые API и библиотеки:

1. Radiopedia API - получение списка городов и частот радиостанций России.
2. Radio-Browser.info — получение ссылок на аудиопотоки, логотипов и жанров для онлайн-плеера.
3. GeoJS - местоположение пользователя по IP.
4. jsPDF — генерация PDF-файла.
5. exceljs — генерация Excel-файла.

🚀 Газуем

Так как проект не имеет зависимостей и сборки, достаточно просто скачать все файлы и открыть index.html в браузере, никаких установок, регистраций. Данные никуда не уходят и остаются в браузере пользователя. Никаких трекеров и рекламы продавцов FM-адаптеров нет, а жаль :)

Можно запустить локальный сервер (например, через Live Server в VS Code или python -m http.server) для корректной работы GeoIP, шрифтов и API запросов (для избежания CORS-проблем при открытии через file://). Для отладки работы бэкапа API - \data\sandbox.html

📁 Расклад

AutoFMShift/
├── .github/
│   └── workflows/
│       └── backup-api.yml      # GitHub Action для ежедневного бэкапа API
├── data/                       # Сгенерированные списки и кэш потоков
│   ├── sandbox.html            # Песочница для локального тестирования fetch_backup.js
│   ├── backup-api.json         # Резервный кэш API radiopedia
│   ├── backup-api.history.json # История обновления кэша API
│   └── stations_data.json      # Кэш потоков от radio-browser.info
├── img/                        # Картинки и иконки
├── api.js                      # Модуль работы с сетью: запросы к API, парсинг, генерация резервного кэша
├── app.js                      # Основная логика приложения и инициализация событий
├── cities.js                   # База координат городов для GeoIP
├── core.js                     # Ядро: управление состоянием, рендеринг UI, темы, импорт/экспорт
├── dial.js                     # Модуль отрисовки визуальной шкалы-тюнера (FM Dial)
├── exports.js                  # Модули экспорта данных (PNG, PDF, XLSX)
├── fmuse.js                    # Модуль "умного" сравнения строк, сопоставления массивов и расчетов
├── fetch_backup.js             # Node.js скрипт для сборки данных внутри GitHub Action
├── player.js                   # Модуль плеера радио-потоков
├── index.html                  # Разметка UI
├── style.css                   # Стили, темы, анимации
└── README.md                   # Документация проекта