A music player progressive web application (PWA), for listening to music, downloading it, viewing the lyrics (with synced lyrics), listening to it with your phone screen off, and listening without an internet connection!
I fixed the issue with the song stopping when the phone screen turned off. It turns out putting a video with a single frame (the thumbnail) into an audio component does some video things and needs the hardware decoder, which was why it was stopping. I fixed it by converting the video file into an audio file in the download route. I also moved the logic that played the songs (next song when the current one finishes, etc.) from the watch page to a context, so it works on every page, not just the watch one.
I tried to add the actual PWA support, and I did get the app to actually install (in chrome, not firefox) and cache the pages. It works offline, but there still are many issues that I don’t know how to fix, for example it reloading (resulting in the audio stopping) when I click a link, which wouldn’t normally happen when online. Also the audio stops playing when the screen turns off in chrome, but it doesn’t in firefox. I can start it again through the media session notification and then it plays.
I made the lists reorderable, added media session support, created this lyrics player and added a three dot menu that now contains the old download functionality and moved the offline data indicators next to the three dots (I also added the option to add/remove the current song from the playlist).
I made the playlist/play next list at the right of the screenshot. The functionality is inspired by youtube music – if the current song finishes, play the next one. If there isn’t a next one in this playlist, play the first from a “suggests” list and move it from the bottom list to the top one. This was really hard to do, because I wanted the url to update the song id without reloading the page, actually autoplaying the next song, etc. I also fixed some UI/layout issues.
I added a responsive sidebar with a downloaded songs list. Later I added this layout to the main layout.tsx so it is on every page. I also made a global system for playing music so it doesn’t pause when you go to another page, and because of that I had to make my own UI controls component for it. And finally, I made the currently playing song to display on the bottom.
Firstly I made this search page that shows the search results, and then later I made this watch page where the user can download a song and play it.
