Hello SR open API!


I’m totally addicted to Sweden’s public service radio, especially the SR P1 channel that is almost always flowing from our speakers at home. Programs that I miss, I catch up with via the excellent collection of SR podcasts.

When I recently decided to refresh my knowledge in AngularJS, I was looking for a ready-to-use backend for my front-end experiments. It turned out that Swedish Radio has a very nice REST API that is free to use! There is documentation available and also a forum.

My first test was to fetch all radio channels’ meta data, list the channels and their logotypes and provide links to the live broadcast url:s. You can view my published experiment in Plunker here:


It should look something like this:


There are three radio buttons that you can use to filter among different types of channels. About the code, there is not much needed in the controller:

var myApp = angular.module('myApp', []);
myApp.controller('SRChannelsController', ['$scope', '$http', function($scope, $http) {
$scope.header = 'Radio channels on Sveriges Radio';
$scope.filter = "Riks";
$scope.filterChanged = function() {
getChannelsInfo = function(filter) {
var promise = $http.get("http://api.sr.se/api/v2/channels/?format=json&pagination=false&filter=channel.channeltype&filtervalue=" + filter);
promise.then(function(response) {
var channels = response.data.channels;
$scope.channels = channels;

view raw
hosted with ❤ by GitHub

And then, to display the data in the view:

<!DOCTYPE html>
<html ng-app="myApp">
<script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script src="SRController.js"></script>
<link rel="stylesheet" href="style.css" />
<div ng-controller="SRChannelsController">
<h1>{{ header }}</h1>
<form name="myForm" ng-controller="SRChannelsController">
<input type="radio" ng-model="filter" value="Riks" ng-change="filterChanged()"> National
<input type="radio" ng-model="filter" value="Lokal" ng-change="filterChanged()"> Local
<input type="radio" ng-model="filter" value="Fler" ng-change="filterChanged()"> More
<div ng-controller="SRChannelsController">
<table class="table table-striped">
<th>Live broadcast link</th>
<tr ng-repeat="item in channels">
<td class="vert-align">
<img ng-src={{item.image}} height="70" width="70">
<td class="vert-align">
<b>{{item.name}} – {{item.channeltype}}</b>
<td class="vert-align">
<a href={{item.liveaudio.url}} type="audio/mpeg" class="playbutton">Play {{item.name}}</a>

view raw
hosted with ❤ by GitHub


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