Radioplayer allows you to customise the station page in the mobile app. This article explains how, however this is an advanced topic and the intended audience is experienced front-end developers. Don't start out on this if that's not you as the implementation is quite challenging and Radioplayer's support is limited to these articles.

The station page is a web page that you host on your servers. You may see our documents refer to a 'web view', 'mobile view' or 'station view' as you read through our various pages. These are all the same thing. We have embedded a webkit browser into the mobile app, on the station screen, and the page which loads when a station starts playing is either our default, or your customised page.


The page is special in that it has additional functionality built in which allows the web page to read various properties from the app – such as the song currently playing, volume, connection type and so forth. It does this through some custom JavaScript calls. Through JavaScript the web page can also set various properties including managing the transport controls. This is useful if you want to use the space for a video pre-roll advert and need to stop your station playback while this is ongoing.

Getting started

The first thing you should do is read the developer documentation. We have written a usage guide which you should read first. Next, have a glance through the API documentation. You will see there are a lot of functions available at your disposal.

Clone the default station page

A good starting point to see how things work, is to clone the default station page we provide. It's located here (correct at time of press although its destination changes from time-to-time – if the link doesn't work, write in). Save it to your computer and open it in your preferred HTML editor.

Start coding!

You will see that by default, a number of calls are already made – mainly to retrieve station branding, descriptions about the service and what's on air and social identifiers. You will see how we've used that to present a page. There is also code which invites users to add a station to their favourites if they've listened to a station a certain number of times. All of this is useful as you'll be able to see what you can do with the functionality.

Testing

Testing is actually quite hard because you can only have one station page URL per station and that's live to the public the moment you change it. Most stations, therefore, write an IP sniffing script which detects whether a user is from a known IP - and if so, redirects them to a dev version of the station page hosted somewhere privately. And if not, the user is public so redirected to the default one at http://static.radioplayer.co.uk/mobile/v2/stationview/index.html. You will need to login to the my.radioplayer.org, edit your station record and locate the "Mobile Station View URL" field to point it to your IP sniffing script. Note that this field is not the same as your "Console URL" field.

Go live

Login to my.radioplayer.org and update your "Mobile Station View URL" field. The change will be live once we've checked and approved the request.