Music Visualizer — neon tuner edition

Виртуальный плеер, в котором графика в реальном времени реагирует на музыку. Неоновый стиль тюнингованной машины: кузов-дека с фарами, LED-эквалайзерами по бокам и подсветкой днища, которая пульсирует от баса.

Публичная ссылка: https://music-visualizer-pied.vercel.app

Фронтенд — чистые HTML, CSS и JavaScript без сборки. Бэкенд — функции Vercel: плейлист и настройки хранятся в облачной базе Turso, аудиофайлы и обложки — в Vercel Blob.

Возможности

Визуализация

• Bars — зеркальный спектр с пиками и отражением на «мокром асфальте»
• Wave — спокойная осциллограмма с привязкой фазы и медленным «эхом»
• Circle — неоновое колесо: лучи спектра, вращающиеся спицы, обложка трека в ступице
• Dash — приборная панель: громкость (дБ) и темп (BPM) на стрелочных приборах, основной тон (нота и частота), уровни пяти частотных зон
• Плавное «перетекание» между режимами и цветовая волна из центра при смене пресета
• 4 цветовых пресета: Neon Drift, Synthwave, Toxic, Big Rig

Облако

• Плейлист и настройки (режим, пресет, эквалайзер, громкость) — в базе Turso
• Треки и обложки загружаются прямо из браузера в Vercel Blob
• Пресеты сообщества: можно поделиться своим эквалайзером, и его увидят все
• Треки, сохранённые старой версией в браузере, переносятся в облако одной кнопкой
• Без сервера (например, на GitHub Pages) всё по-прежнему работает локально в IndexedDB

Плеер

• Обложки и теги прямо из файлов: MP3 (ID3v2, включая cp1251), FLAC, M4A
• Перемешивание, повтор (весь плейлист / один трек), медиаклавиши клавиатуры
• 5-полосный эквалайзер «как в магнитоле» с пресетами и графиком АЧХ
• Другие источники звука: микрофон и звук вкладки браузера
• Определение темпа (BPM) на лету

Интерфейс

• Адаптив для телефона (в том числе горизонтально) и планшета
• Полноэкранный режим с автоскрытием панели

Деплой и переменные окружения

Ключи и токены живут только в переменных окружения — в коде и в репозитории их нет.

Переменная	Откуда	Зачем
TURSO_DATABASE_URL	интеграция Turso в Vercel (Storage → Turso)	адрес базы
TURSO_AUTH_TOKEN	интеграция Turso в Vercel	доступ к базе
BLOB_READ_WRITE_TOKEN	Vercel Blob (Storage → Blob)	загрузка и удаление файлов

На Vercel эти переменные подставляются автоматически при подключении хранилищ к проекту. Каждый push в main деплоится сам.

Локальный запуск

npm install
npx vercel env pull .env.local   # скачать переменные проекта (файл в .gitignore)
npm run dev                      # http://localhost:3000

Без облака можно указать в .env.local локальную базу: TURSO_DATABASE_URL=file:local.db (шаблон — в .env.example). Если сервер не отвечает на /api/health, страница сама переходит в режим «только браузер».

Микрофон и звук вкладки браузер разрешает только по https или на localhost. Звук вкладки работает в Chrome и Edge — в окне выбора нужно включить «Поделиться звуком».

Управление

Клавиша	Действие
Space	Play / Pause
N / B	Следующий / предыдущий трек
1–4	Режим визуализации
← / →	Перемотка на 5 секунд
P	Следующий цветовой пресет
L	Плейлист
E	Эквалайзер и настройки
F	Полноэкранный режим
Esc	Закрыть панель

Как это устроено

браузер ──fetch──► /api/* (функции Vercel) ──► Turso: tracks, settings, eq_presets
   │                    │
   │                    └─ /api/upload выдаёт одноразовый токен
   └──── файл трека напрямую ─────────────────► Vercel Blob

звук: файл → эквалайзер (5 × BiquadFilter) → лимитер → AnalyserNode → громкость → колонки
      микрофон / вкладка ──────────────────────────────→ AnalyserNode

Каждый кадр requestAnimationFrame приложение забирает спектр и форму волны из AnalyserNode, раскладывает спектр на 64 логарифмические полосы и рисует сцену на <canvas>. Темп определяется автокорреляцией огибающей «всплесков» спектра за последние 8 секунд.

Файл	Что внутри
index.html	Разметка: сцена, боковая панель, дека плеера
style.css	Неоновая тема, пресеты, адаптив
app.js	Аудиограф, анализ, BPM, режимы Bars / Wave / Circle, плейлист и облачное хранилище, эквалайзер, источники
scenes.js	Режим Dash и определение основного тона
tags.js	Чтение тегов и обложек из MP3, FLAC и M4A
api/tracks.js	Плейлист: список, добавление, удаление (вместе с файлами в Blob)
api/settings.js	Настройки пользователя
api/presets.js	Общая галерея пресетов эквалайзера
api/upload.js	Токен для прямой загрузки файла в Vercel Blob
api/health.js	Проверка, что база и хранилище подключены
api/_lib.js	Подключение к Turso, схема таблиц, проверки
vendor/blob-client.js	Браузерный клиент Vercel Blob (npm run build:blob-client)
dev-server.js	Локальный сервер: статика + функции из api/

Пользователь анонимный: при первом заходе браузер получает случайный UUID и передаёт его в заголовке X-User-Id, поэтому у каждого браузера свой плейлист.