stardance has been extended another month! the new deadline is october 31 :)

You are browsing as a guest. Sign up (or log in) to start making projects!

Better Music

  • 15 Devlogs
  • 32 Total hours

It’s a music player made with Electron that tracks your listening time and can give you a detail breakdown of your listening activity at any time, sort of as Spotify Wrapped

Ship #2 ✨ Blessed

I built Better Music, a lightweight music player designed for seamless audio playback and intuitive library management. It features an instant search-as-you-type engine, interactive queue management, customizable playlist/album details, detailed listening activity tracking, can read synced/unsynced lyrics tags from the music files and show them like Spotify, a “Permanent Queue” (PQ) feature for when you want listen to a list of particular songs for just that one moment and don’t want to create a whole new playlist for it and you can customize it’s color palette and even the base border radius to your liking in the settings.

To bring this to life, I combined the desktop application capabilities of Electron with a robust local relational database powered by SQLite 3, all wrapped in a sleek, responsive frontend built using HTML5, CSS, SCSS and JavaScript.

This is just an update and the majority of the time spent on the project was used to make improvements in the backend management of the song objects and to make the UI better reflect and update according to the data in the backend. But also I’ve added lyrics support and if your music files have lyrics tags embedded in them the app will take full advantage of them by enabling you to see each verse when it is singed and also skip to that one part you like the most just by clicking on your favorite line in the track.

Testing the app is incredibly simple—there is no need to clone deep source code dependencies or set up a complex development build environment.

Where to get it: Head straight over to the Releases section of this repository.

How to run it: Download the compiled .zip file for your platform, extract its contents into any folder on your computer, and double-click the main application executable (e.g., Better-Music.exe).

Note on Updates: If you are testing store-packaged builds or encountered deployment errors (like MSIX package revision conflicts in the Partner Center), utilizing the raw ZIP release is the fastest, cleanest way to experience the app right now.

  • 8 devlogs
  • 20h
  • 8.54x multiplier
  • 202 Stardust
Try project → See source code →
Open comments for this post

1h 2m 48s logged

This is the last devlog before shipping the project update. This has been an exciting journey and I am very satisfied with the result!
I do wish there would be a bit more time left for the event to continue so I could ship even more things but all good things must come to an end, and this one is a happy ending.
I’ve made the necessary last minute touches to make sure that everything works as it should.

0
0
22
Open comments for this post

1h 40m 11s logged

Added new ways to customize the player to the user’s liking and fixed that prevented the app from reading the user_version of the database which in return made the app “update” the DB everytime it started.

0
0
9
Open comments for this post

29m 7s logged

YEEEEEESS, FINALLLYYYYYY, we have synced lyrics in the app.
I know it’s not the most glamorous UI at the moment, but it is still something, and the other music players don’t even do this, like at most they show the lyrics with the timestamps and that’s it, no scaling of the verse, nothing.
In future updates certainly I’ll make the UI more polished because it need a lot of it. Still I am happy that I’ve made it this far and after a bit of clean up and maybe some optimizations I’ll ship the project.

0
0
6
Open comments for this post

1h 30m 24s logged

I’ve finally found the culprit that prevented me from getting the synced lyrics, now the app can read the synced lyrics from music filed. YEEEEEEE
Now the “only” thing is to make the UI for them, which I hope would be easy and fast. 😅

0
0
7
Open comments for this post

2h 27m 6s logged

Trying to add lyrics to the app. But it is a bit of a mess cause in the Samsung Music and Apple Music apps these files contain time stamps for each verse and so I was thinking to read those time stamps and to highlight the verse that is played at that time, but my app doesn’t read those things and I don’t know why.
An explanation might be that those apps ping free open source databases of lyrics based on the song details, but I am not really sure.

0
0
5
Open comments for this post

4h 44m 55s logged

Another day, another restructuring I guess. 😅
I’ve decided to give each album an id instead of relying on it’s name as the identifier as I did previously. Also I’ve changed the Play function to work with song ids and album ids instead of names. This is because if the name of the song or the album had any of these 2 characters: ’ or “ it would mess up with the HTML structure and the song would not play if the user clicked on it.
Not gonna lie, I think that my code now is a little spaghetti and for sure someone with more experience and knowledge on how to structure a music player would have done a much better job than me at this, but still.
The main caveat that I think could appear in the future is that the Play function can’t take numbered ids for playlists and I have to rely in the playlist’s name because the function would have no way to distinguish between them at the moment and I don’t want to make another spaghetti to fix this. 😅

In other news, I have successfully changed the backend to update the DB version for the user of the older version of the app and to add the new “lyrics” column and also the app can read the embedded lyrics from the music files.
Now the “only” thing remaining is to add the lyrics to the UI and to parse the strings and make the verses synchronize with the song and this feature would be fully implemented.

0
0
7
Open comments for this post

2h 59m 11s logged

After successfully changing the song objects management under the hood from the previous devlog I now added an indicator for which song is currently playing. For now I’ve just set the background of the song to be the primary color selected by the user.
Also I’ve changed the border radius for everything to be based on one variable so that the user could change it in the settings (but didn’t yet implement the UI for that) cause everyone has their own preference for these things. The first screenshot is with the border radius set a bit higher (30px) than my default one (23px), and the second one is with the border radius set to 0.

Additionally I am changing the SQLite db in the backend to support lyrics because I want to add them to the app.

0
0
15
Open comments for this post

4h 45m 5s logged

I am currently working on optimizing the code so that changes like adding songs to a playlist or liking a song update instantly across all pages because this was a flaw of my old architecture of the app cause I didn’t just have 1 list of song objects that every album and artist referenced to but instead every album and artist had their own song objects and the list of favorite songs was also composed of song object. So it was a mess of duplicate song objects.

Now I am changing things so that there is only one list of song object and albums have just a list of song ids in them so they reference the song object list, this way each change is global.

This would hopefully fix the current synchronization issues that sometimes occur in the current version.

This change would also allow me to add an indicator that a song is playing when the user looks at an album from which a song plays currently.

Additionally I want to add a listening history page where the user can see their listening activity on the app and also maybe add some rewards depending on how much time they spent listening to an artist or album to gamify the experience a little.

0
0
25
Ship #1

I built Better Music, a lightweight music player designed for seamless audio playback and intuitive library management. It features an instant search-as-you-type engine, interactive queue management, customizable playlist/album details, detailed listening activity tracking, a “Permanent Queue” (PQ) feature for when you want listen to a list of particular songs for just that one moment and don’t want to create a whole new playlist for it and you can customize it’s color palette to your liking in the settings.
To bring this to life, I combined the desktop application capabilities of Electron with a robust local relational database powered by SQLite 3, all wrapped in a sleek, responsive frontend built using HTML5, CSS, SCSS and JavaScript.

The challenging part was the steep learning curve as I hadn’t done anything on this scale before. I had to learn to connect the 2 Electron processes together seamlessly. Furthermore I had to dive into the world of databases with SQLite 3, which was uncharted territory for me. I had to use AI to help me learn these things and also to brainstorm ideas about hoe to optimize the app. For instance, when the idea of the search-as-you-type feature came up to me I envisioned a kind of tree structure with letters and that for every song, album, playlist name the app would create the branches in the tree so it would be a very fast and efficient search algorithm, and when I talked to the AI about it I found out that this kind of structure is called a trie.

I am really proud that I’ve managed to build a clean, responsive and fast music player that tracks the user’s listening activity and stores it on device. Also it was very exciting when I tested the search feature and it worked perfectly. I’m also proud of the engineering journey itself. I utilized Gemini as an active learning collaborator to help me unpack the architectural patterns of Electron and master data persistence with SQLite 3. Turning that complex technical guidance into a functional, polished desktop product was incredibly rewarding.

Testing the app is incredibly simple—there is no need to clone deep source code dependencies or set up a complex development build environment.

Where to get it: Head straight over to the Releases section of this repository.

How to run it: Download the compiled .zip file for your platform, extract its contents into any folder on your computer, and double-click the main application executable (e.g., Better-Music.exe).

Note on Updates: If you are testing store-packaged builds or encountered deployment errors (like MSIX package revision conflicts in the Partner Center), utilizing the raw ZIP release is the fastest, cleanest way to experience the app right now.

  • 7 devlogs
  • 13h
  • 9.67x multiplier
  • 121 Stardust
Try project → See source code →
Open comments for this post

2h 47m 31s logged

Adding clear queue button and a Permanent Queue or Temporary Playlist feature that saves the songs that you add to the queue even after you listen to them so you can set it to repeat all and still have the songs that you wanted

0
1
12

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…