Swedish Radio has a great Open API that can be used for finding channel-, program- and episode-data and streaming audio for these where available. I’ve experimented with this API in the past but recently I’ve taken a new approach with it by making a mobile-friendly web app based on Angular and PrimeNG. You can view a demo of the application at: https://larsbergqvist.github.io/sr-app. The code is available from GitHub: https://github.com/LarsBergqvist/sr-app.
Overview
The application lets you browse channels, programs and episodes. The channels/live view lists the available channels and supports listening to live streams. You can also open a view for a channel’s details as a sidebar. This view includes information about the current/previous/next episode and the current playlist for the channel. From the main channels list it is also possible to access today’s schedule for a channel.
The programs view lists the available programs and a free-text filter can be used for searching. You can mark a program as a favorite so that you can easily find it later. The program details view lists all episodes for the program and lets you replay audio for the episodes. You can open an episode details view with additional information that contains the complete song list (if available) for the episode.
The episodes view has the ability to free-text search among all episodes from Swedish Radio. I’ve found quite a few interesting listening experiences this way.
Angular components
The component layout of the Angular application looks something like this:
The application has a fixed header with a navigation bar and an audio player component. Below the header is a <router-outlet> that displays the ChannelsList-, ProgramsList- or EpisodesList-Component depending on what route is selected in the navigation bar. From the items in the lists, you can open different details views of channels and programs. The details views are displayed as sidebars.
Desktop vs mobile view
The application uses the PrimeNG UI-library. This library supports responsive layouts so that the views appear differently depending on if the screen is wide (like a desktop browser) or narrow (like a mobile view). For example, the lists are shown as tables with columns on wide screens and as one column with stacked data on smaller screens.
Translations
The default text for the application is English, but as the main audience for Swedish Radio are Swedish-speaking users, there is a Swedish translation that is applied if the browser uses Swedish as main language.
The code
The code for this application is available from GitHub: https://github.com/LarsBergqvist/sr-app
Feel free to experiment with it as you like!
Thingsmatic 