Audio streaming with Angular and PrimeNG

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.

Channels/Live list

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.

Programs list

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.

Result from free-text searching episodes

Angular components

The component layout of the Angular application looks something like this:

Layout of Angular components

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.

Episode details with Swedish translation

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!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s