Please sign in to access this page
Lofi-Code Used AI
π§ Overview:
Lofi-Code is a π΅ fun, offline-first music player built with π» HTML, CSS, and JavaScript. It lets users π― drag and drop music files or folders into the browser and play them instantly with a π¨ sleek, vintage-inspired interface. No internet π or backend required β just local vibes.
π§° Tech Stack
πΎοΈ Frontend: HTML, CSS, JavaScript
π Web APIs: File API, Audio API
π» Desktop App: Electron.js + Node.js
Followers
No followers yet
Ship Your Project
Get ready!
Once you ship this you can't edit the description of the project, but you'll be able to add more devlogs and re-ship it as you add new features!
Timeline
I have officially made an installer (.msi and .exe) for windows for lofi code. source code on git hub
So i just learnt that windows desktop icons only accept .ico format π.
was wondering why my icon was so messy
Ok been a while since I posted anything, but electron js is not for the weak. ive been able to start moving the web app to a desktop app now. putting the finishing touches on lofi code version 1.0
Making Serious progress this night, the music player is officially working
π£οΈ: Never BACK DOWN Never what!!!
π£οΈ: Never GIVE UP!!!
I'm officially done with my front end. I'm now moving on to Node.js and trying to use GSAP locally. I'm also converting the website into a desktop app using Electron.js
What a day πππ
Making Progress
What I've done so far:
1. File Loading
- Uses the showOpenFilePicker API to load multiple audio files (MP3, WAV, etc.)
- Converts files to Blob URLs for playback
- Playback Controls
- Play/Pause, Next/Previous, Shuffle, Repeat
- Volume slider with localStorage persistence
- Playlist Management
- Displays loaded tracks in a scrollable list
- Click any track to play it
- Highlights the currently playing song
- Visual Feedback
- Progress bar with time display
- Vinyl record animation when playing
- Responsive design (works on mobile/desktop)
does anybody know anything about handling audio in browsers πππ
