Test project 11 May 2023
izar - a Yandex-Music-style web player with a reactive sound stage
- Nuxt 3
- Vue 3
- TypeScript
- Tailwind
- SCSS
- Web Audio API
- WebGL
- i18n
A rough Nuxt starter rebuilt into a real music player: actual HTML5 audio with a persistent queue, a full-screen now-playing screen, favorites, search, radio and a top 100, and a hero whose background reacts to the music. Two reactive backgrounds - a 3D dot-wave and a WebGL aurora reverse-engineered from Yandex's My Wave - both driven by a Web Audio analyser, in English and Russian.
The challenge
Turn a bare Nuxt scaffold - sidebar, i18n and a theme switch, no actual player - into a real, premium music app with genuine playback and a hero that reacts to the music without flickering or jumping between shapes.
Approach
Build the audio core first: one shared audio element and a Web Audio analyser behind a composable, with a persistent queue, shuffle and repeat. Then the reactive hero in two switchable styles under one rule - audio drives only smoothed brightness and flow while motion runs at a constant rate, which is what keeps it alive but steady. Theme the whole UI and the wave from one editable accent variable, and ship it bilingual, accessible and static.
Result
A bilingual Yandex-style web player with real audio and persistent state, a full-screen now-playing screen, favorites, search, radio and a top 100, and a choice of two music-reactive hero backgrounds that pulse without jitter. A static Nuxt build deployed behind Caddy.