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
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
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.
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.
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.
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. 😅
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.
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.
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.
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.
Solving some App Manifest problems
Updating the package on the Microsoft Store
Added some customization options and a settings menu
Updating the interface a little
Implemented search functionality
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
I implemented the function of changing the name and cover of a playlist