A multi-platform music player that utilizes several APIs and SDKs to combine Youtube, Soundcloud, and local file music all in one place. UI made with React, along with Tauri for desktop, and React Native for mobile (in development). Spotify and Apple Music support comming soon
About
I was tired of switching between different apps to listen to exclusive music spread across YouTube, SoundCloud, and my local library. I wanted one place where I can slap music from a variety of sources into one playlist and let the app dynamically swap between the different APIs and SDKs, just one simple tap to play the next song.
Architecture
Frontend UI made with React and TailwindCSS. On launch it loads the various CDNs and boots each player. I use a Platform base class with no-op default methods for shared actions, like search, load, set volume, seek and more. Then a class for each platform like YouTube and SoundCloud subclass it and polymorph those methods to implement platform-specific API behavior. When clicking a song to play, the app swaps the current engine to the desired platform and all gestures and UI elements seamlessly interact with that player.
For the server side backend and database I have an Express rest API and PostgreSQL server running on my VPS. Express handles all the various platform API account validation, authorization, and saving/loading from the database for cross device synchronization.
For the desktop version I use the same React frontend coupled with Tauri to spawn a NodeJS script as my backend, setting up inter-process communication to serve local files. The script then starts a local server to allow easy streaming of music, videos, and cover arts to the frontend.
For the Android app I wrote native Kotlin code because i required the WebView API, a big hurdle was keeping the app in an awake state while the phone was locked because youtube does not allow background playback. To get around this WebView gives you master control over the makeshift browser and allows you to inject javascript into any page. I used this to disable any checks and restrictions blocking this feature.
On launch the WebView navigates to a simple HTML page I made that is essentially a stripped down version of the main website that only handles the platform APIs. The WebView will inject javascript for events such as passing a youtube url for a song. The page receives it, loads the Youtube API and starts the video. Then it will broadcasts messages containing information such as the state of the player, duration of the song, etc. The WebView listens for these events and updates the UI accordingly for another layer of inter-process communication.