Тестовое задание 11 May 2023
izar - веб-плеер в духе Яндекс Музыки с реактивной заставкой
- Nuxt 3
- Vue 3
- TypeScript
- Tailwind
- SCSS
- Web Audio API
- WebGL
- i18n
Черновой стартер на Nuxt, переделанный в настоящий музыкальный плеер: реальное воспроизведение HTML5-аудио с сохраняемой очередью, полноэкранный экран трека, избранное, поиск, радио и топ-100, и заставка, которая реагирует на музыку. Два реактивных фона - 3D-волна из точек и WebGL-сияние, восстановленное по «Моей волне» Яндекса, - оба питаются от Web Audio-анализатора. На английском и русском.
Задача
Превратить голый каркас на Nuxt - сайдбар, i18n и переключатель темы без плеера - в настоящее музыкальное приложение с честным воспроизведением и заставкой, которая реагирует на музыку, но не мерцает и не прыгает между формами.
Подход
Сначала ядро аудио: один общий элемент audio и Web Audio-анализатор за композаблом, с сохраняемой очередью, перемешиванием и повтором. Затем реактивная заставка в двух переключаемых стилях по одному правилу - аудио управляет только сглаженной яркостью и потоком, а движение идёт с постоянной скоростью, и именно это держит её живой, но спокойной. Весь интерфейс и волну красит одна редактируемая акцентная переменная, всё на двух языках, доступное и статическое.
Результат
Двуязычный веб-плеер в стиле Яндекса с настоящим аудио и сохраняемым состоянием, полноэкранным экраном трека, избранным, поиском, радио и топ-100 и выбором из двух реагирующих на музыку фонов, которые пульсируют без дёрганья. Статическая сборка Nuxt за Caddy.