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 ad and need to stop your station playback whilst 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 favourite 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.ca/mobile/v2/stationview/index.html. You will need to login to the Station Control Panel, edit your station record and located the “station view” URL field to point it to your IP sniffing script. Note that this field is not the same as your player console URL field.
Go live
Login to the Station Control Panel and update your “station view” URL field. The change will be live once we’ve checked and approved the request.