A single-file browser lofi music player with a cozy attic aesthetic. Five curated stations, 6 tracks each, a live audio visualizer, crossfade engine, and autoplay station rotation — all in one self-contained HTML file.
| Station | Vibe | Tracks |
|---|---|---|
| 🔥 Hearthside Jazz | embers in slow time · warm piano · vinyl crackle | Golden Ember Walk · Midnight Window Glow · Crackling Coffee Cups |
| 🐠 Ocean Drift | ocean breeze · lofi drift · coastal warmth | Sunlit Breakers · Tideglass Afternoon · Sunset Saltwater Drift |
| 🌙 Midnight Study | midnight purple raindrops · late night haze | Midnight Vinyl Rain · 2AM Constellations · Midnight Through Wet Glass |
| 📚 Deep Focus | steam on the window · warm focus · jazz cafe | Sepia Steam · Sepia Steam Study · Sepia Study Steam · Sepia Steam Study Jam |
| ✨ Dream State | rain drunk music box · drift · 432hz | Rainy Room Music Box · Pastel Rain Windows · Clouds On The Windowsill |
Each station applies its own color wash, accent glow, and visualizer color to the scene — so the whole room shifts mood when you switch.
- Live audio visualizer — frequency bars react to the music in real time
- Crossfade engine — smooth transitions between tracks, no hard cuts
- Multi-track stations — each station cycles through 6–8 tracks in sequence before looping
- Autoplay rotation — when a station finishes, the player automatically transitions to the next one; clicking any station resets the loop from there
- Graceful track skipping — if a file is missing, the player silently skips it and continues rather than breaking
- Per-station theming — background filter, accent color, and visualizer tint all change per station
- Volume control — slider in the dock with percentage readout
- Fully self-contained — one HTML file, no build step, no dependencies, no internet required after load
- Ko-fi support button — bottom right of the dock
- Clone or download this repo
- Make sure all MP3 files are in the same folder as
index.html - Open
index.htmlin any modern browser
Each station uses multiple tracks that crossfade seamlessly. All files must be in the same directory as index.html.
🔥 Hearthside Jazz
Golden Ember Walk.mp3
Golden Ember Walk (1).mp3
Midnight Window Glow.mp3
Midnight Window Glow (1).mp3
Crackling Coffee Cups.mp3
Crackling Coffee Cups (1).mp3
🐠 Ocean Drift
Sunlit Breakers.mp3
Sunlit Breakers (1).mp3
Tideglass Afternoon.mp3
Tideglass Afternoon (1).mp3
Sunset Saltwater Drift.mp3
Sunset Saltwater Drift (1).mp3
🌙 Midnight Study
Midnight Vinyl Rain.mp3
Midnight Vinyl Rain (1).mp3
2AM Constellations.mp3
2AM Constellations (1).mp3
Midnight Through Wet Glass.mp3
Midnight Through Wet Glass (1).mp3
📚 Deep Focus
Sepia Steam.mp3
Sepia Steam (1).mp3
Sepia Steam Study.mp3
Sepia Steam Study (1).mp3
Sepia Study Steam.mp3
Sepia Study Steam (1).mp3
Sepia Steam Study Jam.mp3
Sepia Steam Study Jam (1).mp3
✨ Dream State
Rainy Room Music Box.mp3
Rainy Room Music Box (1).mp3
Pastel Rain Windows.mp3
Pastel Rain Windows (1).mp3
Clouds On The Windowsill.mp3
Clouds On The Windowsill (1).mp3
The background image is embedded directly in the HTML as base64, so no separate image file is needed.
samirsaad786.github.io/lofi-room
If you enjoy this, consider buying me a coffee ☕
ko-fi.com/SamirSaad786
Samir Saad — HR practitioner, OD nerd, and occasional builder of things that shouldn't exist but do.
github.com/SamirSaad786