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:
http://run.plnkr.co/plunks/ogfyjJ/
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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($scope.filter); | |
| }; | |
| 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; | |
| }); | |
| }; | |
| getChannelsInfo($scope.filter); | |
| }]); |
And then, to display the data in the view:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app="myApp"> | |
| <head> | |
| <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" /> | |
| </head> | |
| <body> | |
| <div ng-controller="SRChannelsController"> | |
| <h1>{{ header }}</h1> | |
| </div> | |
| <div> | |
| <form name="myForm" ng-controller="SRChannelsController"> | |
| <label> | |
| <input type="radio" ng-model="filter" value="Riks" ng-change="filterChanged()"> National | |
| </label> | |
| <label> | |
| <input type="radio" ng-model="filter" value="Lokal" ng-change="filterChanged()"> Local | |
| </label> | |
| <label> | |
| <input type="radio" ng-model="filter" value="Fler" ng-change="filterChanged()"> More | |
| </label> | |
| </form> | |
| </div> | |
| <div ng-controller="SRChannelsController"> | |
| <table class="table table-striped"> | |
| <thead> | |
| <tr> | |
| <th>Icon</th> | |
| <th>Name</th> | |
| <th>Live broadcast link</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr ng-repeat="item in channels"> | |
| <td class="vert-align"> | |
| <img ng-src={{item.image}} height="70" width="70"> | |
| </td> | |
| <td class="vert-align"> | |
| <b>{{item.name}} – {{item.channeltype}}</b> | |
| </td> | |
| <td class="vert-align"> | |
| <a href={{item.liveaudio.url}} type="audio/mpeg" class="playbutton">Play {{item.name}}</a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </body> | |
| </html> |
Thingsmatic 