Radiotracks
It all started with a simple idea: I love music, my music in particular. I have a big pile of mp3-files on my harddrive from over 15 years of collecting and I don't want to pay for Spotify or alike. Why not create my own streaming platform and have my music available to me anywhere on the planet?
The library contains the whole selection of content on the application
The app has a library, which contains a structural overview of all the available content. It supports: Artists (which have Albums), Authors (which have Audiobooks), Channels (radio stations), Playlists (containing Tracks from Albums) and Podcasts (which have Episodes).
The Version shown here is number 4. Over the years I had to rewrite the whole project a few times because I discovered new tech or had a new approach how to do things (currently I am planning for version 5 ). The backend is powered by Python and the frontend uses plain HTML, CSS and JavaScript (without any libraries).
Main features/components
There are several (this is a comprehensive overview)
The Indexer
This is a quick one: The indexer is a sub-thread inside the backend and (who would have guessed) indexes new media (mp3-files), that have been uploaded to the server, into the database with ids and all the good stuff. It runs once per day on a given time and automates the process of populating the app with content. Depending on the given media type (music, audiobooks, radio stations, podcasts etc.) it will do all the different actions needed to get the content indexed. For getting the mp3 file attributes I use the Python library mutagen.
Radio stations and how they work
A small portion of the big selection of radio stations
The radio stations are the oldest feature of the whole project and have already been part of the first version of Radiotracks. The main idea is to listen to radio stations from games like Grand Theft Auto, Mafia I-III, Saints Row and alike outside of the games. Included are the music, announcements (for music and the like), monologues/dialogues of the station hosts, ads, news and weather forecasts (as good as possible, some channels only have a few of these elements). For modeling how these games implement their ingame-radio stations I came up with 3 channel types:
- LightChannel: These stations have a stactic playlist of tracks that never changes and loops endlessly.
- AdvancedChannel: These stations have a dynamic playlist that is constantly changing. Each playlist has a duration of about 30 minutes and has dynamic events like ads, news and weather announcements.
- InternetChannel: These stations are simple streams of normal web radio stations that can be listened to directly.
The special feature about these radio stations is, that they are simulating broadcasts of real radio stations. That means 2 things:
- Stations keep running and are constantly changing with or without you listening to them (you can actually miss content and you can't rewind or forward tracks).
- Each station in synchronous. So if you would open the same station i.e. on a different device, you will listen to the exact same music at the exact same track time.
The magic for this happens in the backend. The server changes and updates the playlists for the AdvancedChannel and if it receives a request from the frontend it will provide a tracknumber and the seconds inside the track, from where the playback should start.
Automated playlist curation
The playlists are always worth a look
The automates playlist curation is one of the easier features. Each playlist has a so called selector function mapped to it. These functions can have any logic inside them and the update intervalls are free to configure from every second to every 100 years. Sky is the limit so to speak. The shown playlists are updating every day and select different artists and tracks. Playlists can also be managed manually, but I have no time for that .
The API (for everything data-related)
Sample Query (artists), JSON is the best...
If you build a web app, you need some sort of API (most of the time). It is the heart of the application and provides everything you need to make the users stay worthwhile. Radiotrack's API uses Flask for mapping routes and Waitress as a gateway for the requests.
In the background of the API I simply use plain SQL for querying data from the database (which is MariaDB btw.). The search is one of the more complicated features because you can search through the whole content selection. As a small special treatment, the radio stations actually can have additional tags attached to them, so you can find channels that i.e. play reggae music. That is kind of necessary, because the channel names don't always represent their genres and type of mood.
A cross platform Web-App
The home screen shows you random recommendations ('spotlights')
The biggest challenge was the frontend (the web app). Since I didn't write an app for this version I had to overcome all the platform specific (Desktop/Mobile) and the browser specific (Firefox, Chrome, Safari etc.) gotchas you could think of (some cannot be overcome at all). But I did my best, and the resulting code is pure JavaScript mixed with a bit of HTML and a good amount of CSS. Every feature is available on all platforms (except for the visualizer) and the app is also responsive.
The color of the headers for the content views are dynamically calculated from the individual cover image
The most common issues with this kind of web apps come fro the different implmentations of the audio-api. A good example are the JS-Events (onstalled / onerror) that fire at diffent times on different browsers. Also the network states for the audio, which can be used to troubleshoot if the audio hangs or cannot be read, don't behave the same across all browsers. That's one of the reasons why every big music streaming platform like Spotify offers native apps for almost every device (and the web app only for desktops).
The visualizer comes with different styles and visualizes your favourite tracks
Live Demo // Source code
Sadly I can't provide a link to my hosted instance which I use on a daily basis, because I don't have any DRM or similar measures in place to protect the music (which I have no rights to) from being copied illegally. If you want to see a demo, you can watch this video: